（圖一）

（圖二）

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

大概可以這樣子理解：

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

代碼分析：

<el-form-item label="類型:"><el-selectv-model="form.type"clearableplaceholder="請選擇類型"@change = "getStep"><el-optionv-for="item in stage" //遍歷stage里面的值:key="item.name":value="item.name"/></el-select> </el-form-item><el-form-item label="階段:"><el-selectv-model="form.step"clearableplaceholder="請選擇活動區域"@change = "getStage"><el-optionv-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"}]}} }

總結

以上是生活随笔為你收集整理的手写一个二级选择框联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。