vue中有多个下拉框,第二个下拉框要根据第一个得下拉框数据进行选择,可以使用watch监听器,还可以进行选择的时候清空数据
使用多个下拉框进行选择得时候,后一个的下拉框要根据前一个下拉框的数据进行选择,使用watch监听<template><div><el-form ref="formTable" :model="formTable" label-width="90px" :rules="rules"><el-form-item label="检查位置:" prop="floo
·
使用多个下拉框进行选择得时候,后一个的下拉框要根据前一个下拉框的数据进行选择,使用watch监听
<template>
<div>
<el-form ref="formTable" :model="formTable" label-width="90px" :rules="rules">
<el-form-item label="检查位置:" prop="floorId">
<el-select class="mr-12 width-120" placeholder="请选择分期" v-model="formTable.periodizatId">
<el-option
v-for="item in checkStages"
:label="item.periodizatName"
:key="item.periodizatID"
:value="item.periodizatID"
>
</el-option>
</el-select>
<el-select placeholder="请选择楼栋" v-model="formTable.buildId" class="mr-12 width-120">
<el-option
v-for="(item,index) in checkBuild"
:label="item.buildName"
:key="index"
:value="item.buildID"
></el-option>
</el-select>
<el-select placeholder="请选择单元" v-model="formTable.unitId" class="mr-12 width-120">
<el-option
v-for="item in checkUnit"
:label="item.unitName"
:key="item.unitID"
:value="item.unitID"
></el-option>
</el-select>
<el-select placeholder="请选择楼层" v-model="formTable.floorId" class="mr-12 width-120">
<el-option
v-for="item in checkFloor"
:label="item.floorName"
:key="item.floorID"
:value="item.floorID"
></el-option>
</el-select>
<el-form-item>
</el-form>
</div>
</template>
<script>
import { getStages,getBuildingByPeriodizatID,getUnitFloorByBuild } from "@/services/index"
export default {
data(){
return{
checkStages:[],//分期
checkBuild:[],//楼栋
checkUnit:[],//单元
checkFloor:[],//楼层
formTable:{
periodizatId: "",//分期id
periodizatName: "",//分期名称
buildId: "",//楼栋id
buildName: "",//楼栋名称
floorId: "",//楼层id
floorName: "",//楼层名称
unitId: "",//单元id
unitName: "",//单元名称
},
rules:{
floorId:[{required:true,message:'请选择分期',trigger:"change"}]
}
}
},
created(){
this.getSelect()
},
watch:{
"formTable.periodizatId":{
//immediate:其值是 true 或 false;immediate : true 代表如果在 watch 里声明了之后,就会立即先去执行里面的 handler 方法,如果为 false 就跟我们以前的效果一样,不会在绑定的时候就执行。
immediate:true,
//handler:是一个回调函数,即监听到变化应该执行的函数
handler(value){
if (!!value) {
//清空数据
this.formTable.buildId = "";
this.formTable.unitId = "";
this.formTable.floorId = "";
this.getBuild()
}
}
},
"formTable.buildId":{
immediate:true,
handler(value){
if (!!value) {
this.formTable.unitId = "",
this.formTable.floorId = "";
this.getUnit()
}
}
}
},
methods:{
//获取(检查位置)的下拉框
getSelect(){
const param = {
prjID:this.prjId
};
//分期
getStages(param).then(({data})=>{
this.checkStages = data
})
},
//获取楼栋
getBuild(){
const params = {
prjID:this.prjId,
periodizatID:this.formTable.periodizatId
};
getBuildingByPeriodizatID(params).then(({data})=>{
this.checkBuild = data
})
},
//获取单元和楼层
getUnit(){
const params = {
prjID:this.prjId,
buildID:this.formTable.periodizatId
};
getUnitFloorByBuild(params).then(({data})=>{
this.checkUnit = data.buildUnitPoList;
this.checkFloor = data.buildFloorPoList
})
}
}
}
</script>
<style lang="less" scoped>
</style>
需要注意的是:表单校验的时候,我只选择最后的楼层,只需要依次选取即可
效果图如下所示:
更多推荐
已为社区贡献9条内容
所有评论(0)