（圖一）

（圖二）

如上圖所示，當選擇型別時，階段選擇內部需要顯示該型別裡面的階段。

大概可以這樣子理解：

{
    型別1：{
         階段M： XXX
    }，
   型別2：{
         階段N： XXX，
         階段E： XXX
    }
}

程式碼分析：

<el-form-item label="型別:">
    <el-select
       v-model="form.type"
       clearable
       placeholder="請選擇型別"
       @change = "getStep">
       <el-option
         v-for="item in stage"   //遍歷stage裡面的值
         :key="item.name"
         :value="item.name"
       />
     </el-select>
</el-form-item>

<el-form-item label="階段:">
     <el-select
        v-model="form.step"
        clearable
        placeholder="請選擇活動區域"
        @change = "getStage">
        <el-option
          v-for="item in stageStep"   //根據stage對應的每一項，對應的階段內容stageStep進行遍歷
          :key="item.type"
          :value="item.name"/>
      </el-select>
</el-form-item>
 

JS 程式碼：

  data() {
    return {
      form: {
        step: 0,
        stage: 0
      }，
      stage: {},
      stageStep: {}
    };
  },
  mounted() {
     // 呼叫介面獲取總資料 並給 this.stage 賦值
 }，
  methods: {
    getStep(value) {         //獲取型別資料
     if (!(JSON.stringify(this.stage) === "{}")) {
        Object.keys(this.stage).forEach(key => {
          if (this.stage[key].name === value) {
            this.stageStep = this.stage[key].stage;
          }
        });
      }
    },
    getStage(value) {     //獲取選擇型別後對應的資料
     if (!(JSON.stringify(this.stage) === "{}")) {
        this.stageStep.forEach(val => {
          if (val.name === value) {
            this.form.stage = val.type;
          }
        });
      }
    }
}



 

呼叫介面返回值參考：

{
"code": 0,
"data": {
"return_call": {
"type": 1,
"name": "班主任滿意度 ",
"stage": [
{
"type": 1,
"name": "Welcome Call",
"url": "https://jinshuju.net/f/PJYBgQ"
},
{
"type": 2,
"name": "首課提醒",
"url": "https://jinshuju.net/f/PJYBgQ"
},
{
"type": 3,
"name": "首課回訪",
"url": "https://jinshuju.net/f/PJYBgQ"
},
{
"type": 4,
"name": "月常規回訪",
"url": "https://jinshuju.net/f/PJYBgQ"
}
]
}
}
}