本文用的是element-ui 的 select选择组件,简单写一个地区选择,其他用法也相同适用于已经知道枚举值的

// templete 里
<el-form-item label="区域" prop="projectDivision">
                        <el-select
                          v-model="ruleForm.projectDivision"
                          placeholder=""
                          class ="select-update1"
                          @change ="areaChange"
                        >
                          <el-option
                            v-for="item in regionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-model="ruleForm.projectDivision1"
                          placeholder=""
                          class ="select-update2"
                          @change ="areaChange1"
                        >
                        <span v-if="ruleForm.projectDivision">
                          <span v-for="item in regionList" :key="item.value">
                            <span v-if="item.value === ruleForm.projectDivision">
                                <el-option
                                  v-for="item1 in item.child"
                                  :key="item1.value"
                                  :label="item1.label"
                                  :value="item1.value"
                                >
                                </el-option>
                              </span>
                            </span>
                          </span>
                        </el-select>
                      </el-form-item>

第一个select此处列举了三个枚举值 省内 / 省外 / 海外
第二个select联动根据第一个选择

首先先判断第一个选择的值是否为空,如果不为空,再次循环第一个选择,当item.value等第一个选择的值的时候,去循环它的child。 child里就是二级节点的枚举值。
在这里插入图片描述
效果如图:
在这里插入图片描述
在这里插入图片描述

这里有个坑就是:二级选择的时候有值但是选择框里不显示。
原因:因为下拉框数据是v-for接口请求来的数据,因为数据层次太多,render函数没有自动更新
解决办法:
在这里插入图片描述事件里,强制刷新一下就好了。

areaChange1(){
  // console.log(2)
  this.$forceUpdate()//强制更新
    }
Logo

前往低代码交流专区

更多推荐