VUE 实现两个select联动效果
两个下拉框,当选择A的时候B会跟着联动template代码<el-form-item label="名称:"><el-select v-model="formData.houseName" placeholder="请选择"><el-select-menu slot="menu"><el-select-itemv-for="item in houseNam
·
两个下拉框,当选择A的时候B会跟着联动
template代码
<el-form-item label="名称:">
<el-select v-model="formData.houseName" placeholder="请选择">
<el-select-menu slot="menu">
<el-select-item
v-for="item in houseNameList"
:label="item.houseName"
:key="item.houseName"
:value="item.houseName"
></el-select-item>
</el-select-menu>
</el-select>
</el-form-item>
<el-form-item label="号码:" prop="roomNo" class="not-inline">
<el-select v-model="formData.roomNo" placeholder="请选择">
<el-select-menu slot="menu">
<el-select-item
v-for="item in roomNoList"
:label="item.label"
:value="item.value"
:key="item.value"
></el-select-item>
</el-select-menu>
</el-select>
</el-form-item>
script代码
watch: {
'formData.houseName': {
deep: true,
handler(n, o) {
this.roomNoList = this.houseNameList
.filter((item) => item.houseName == n)[0]
.roomNoList.map((item) => {
return { label: item, value: item };
});
}
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)