vue中有多个下拉框，第二个下拉框要根据第一个得下拉框数据进行选择，可以使用watch监听器，还可以进行选择的时候清空数据

使用多个下拉框进行选择得时候，后一个的下拉框要根据前一个下拉框的数据进行选择，使用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>

需要注意的是：表单校验的时候，我只选择最后的楼层，只需要依次选取即可

效果图如下所示：