vue 简单二级联动选择 select二级节点选择
本文用的是element-ui 的 select选择组件,简单写一个地区选择,其他用法也相同, 适用于已经知道枚举值的// templete 里<el-form-item label="区域" prop="projectDivision"><el-selectv-model="ruleForm.projectDivision"pl
·
本文用的是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()//强制更新
}
更多推荐
已为社区贡献6条内容
所有评论(0)