在原来的js的思维下,级联下拉框的选择往往是,先绑定一级下拉框的菜单,然后在该下拉框下onchange, 在onchange事件中获取当前选项,然后绑定二级下拉框的数据,以此类推......
在vue框架下应该改变思维,首先设置一级下拉框的数据,然后watch 该 选项,如果改变,则设置二级下拉框的数据,一次类推:
<el-form-item label="省">
<el-select v-model="where.provinceId" placeholder="请选择省份" clearable >
<el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="市">
<el-select v-model="where.cityId" placeholder="请选择市" clearable>
<el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
const provinces = ref([])
const cities = ref([])
onMounted(()=>{
// 通过接口获取省份
provinces.value = [...data]
})
watch: {
provinceId: {
deep: true,
handler() {
// 根据接口获取市的数据
cities.value=[...data]
// 清空城市的选择
where.cityId=''
}
}
},