【vue组件】使用element-ui 实现三级联动下拉选择

实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容，依次类推
然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除（包括选择里的列表内容）
下面看具体代码：

<template><div><div><el-form
        :size="'small'":inline="true":model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        label-position="left":rules="addRules"><div class="scan_title">展示:</div><!-- 自定义清除方法，注意change方法在clear前执行 --><el-row><el-form-item label="一级选项：" prop="firstId"><el-select
              v-model="ruleForm.firstId"
              placeholder="请选择一级选项"
              @change="changeFirst"
              @clear="handleClearFirstId"
              style="width: 220px"
              clearable
            ><el-option
                v-for="item in allFirstList":key="item.firstId":label="item.firstNo":value="item.firstId"></el-option></el-select></el-form-item><el-form-item label="次级选项：" prop="secondId"><el-select
              style="width: 220px"
              v-model="ruleForm.secondId"
              placeholder="请选择次级选项编号"
              @change="changeSecond"
              @clear="handleClearSecondId"
              clearable
            ><el-option
                v-for="item in allSecondList":key="item.secondId":label="item.secondNo":value="item.secondId"></el-option></el-select></el-form-item><el-form-item label="三级选项：" prop="thirdId"><el-select
              style="width: 220px"
              v-model="ruleForm.thirdId"
              placeholder="请选择三级选项编号"
              @change="changeThird"
              value-key="thirdId"
              clearable
            ><el-option
                v-for="item in allThirdList":key="item.thirdId":label="item.thirdNo":value="item.thirdId"></el-option></el-select></el-form-item></el-row></el-form></div></div></template><script>

export default{
  name:"LinkingSelect",
  props:{},data(){return{
      selectedLabelList:[],
      filSelectedLabels:[],
      refreshKey:0,
      ruleForm:{},
      dynamicTags:[],
      tagVisible: false,
      allFirstList:[],
      allSecondList:[],
      allThirdList:[],
      addRules:{
        firstId:[{
            required: true,
            trigger:"change,blur",
            message:"请选择一级选项",},],
        secondId:[{
            required: true,
            trigger:"change,blur",
            message:"请选择次级选项",},],
        thirdId:[{
            required: true,
            trigger:"change,blur",
            message:"请选择三级选项",},],},};},created(){
    this.handleGetAllFirst();},mounted(){},

  methods:{// 清除次级选择以及子孙选择的内容handleClearSecondId(){
      this.ruleForm.secondId ="";
      this.ruleForm.thirdId ="";
      this.allThirdList =[];},// 清除一级选择以及子孙选择的内容handleClearFirstId(){
      this.ruleForm.firstId ="";
      this.ruleForm.secondId ="";
      this.ruleForm.thirdId ="";
      this.allThirdList =[];
      this.allSecondList =[];},// 清除最后一级选择的内容并刷新changeThird(){
      this.$forceUpdate();},changeSecond(secondId){
      this.ruleForm.thirdId ="";// 判断是否为空字符串if(secondId && secondId !==""){// 请求接口// getThird({//   secondId: secondId,//   fileId: this.ruleForm.fileId,// }).then((res) => {//   this.allThirdList = res.data;// });// 模拟数据
        this.allThirdList =[{
            createBy:"admin",
            createTime:"2023-03-27 10:24:30",
            updateBy:"",
            updateTime: null,
            remark: null,
            thirdId:3,
            thirdNo:"H0",
            leftCapacity:1,
            totalCapacity:5,
            secondNo:"X0",
            secondId:11,
            firstNo:"G0",
            firstId:11,
            manageBy:"admin",
            delFlag:"0",
            deptId:100,
            deptName:"若依科技",
            beginTime: null,
            endTime: null,
            userId: null,},];}},changeFirst(firstId){
      this.ruleForm.secondId ="";
      this.ruleForm.thirdId ="";if(firstId !==""){// 请求接口  // getSecond({//   firstId: firstId,//   fileId: this.ruleForm.fileId,// }).then((res) => {//   this.allSecondList = res.data;// });// 模拟数据
        this.allSecondList =[{
            createBy:"admin",
            createTime:"2023-03-27 10:24:10",
            updateBy:"",
            updateTime: null,
            remark: null,
            secondId:11,
            secondNo:"X0",
            leftCapacity:4,
            totalCapacity:5,
            firstId:11,
            firstNo:"G0",
            manageBy:"admin",
            delFlag:"0",
            deptId:100,
            deptName:"若依科技",
            userId: null,
            thirdId: null,},];}},handleGetAllFirst(){// getFirst({//   fileId: this.ruleForm.fileId,// }).then((res) => {//   this.allFirstList = res.data;// });

      this.allFirstList =[{
          createBy:"admin",
          createTime:"2023-03-27 10:23:57",
          updateBy:"",
          updateTime: null,
          remark: null,
          firstId:11,
          firstNo:"G0",
          leftCapacity:5,
          totalCapacity:5,
          manageBy:"admin",
          delFlag:"0",
          deptId:100,
          deptName:"若依科技",
          beginTime: null,
          endTime: null,
          userId: null,
          fileCate: null,
          secondId: null,
          thirdId: null,},{
          createBy:"aduser",
          createTime:"2023-03-27 10:15:12",
          updateBy:"",
          updateTime: null,
          remark: null,
          firstId:6,
          firstNo:"G1",
          leftCapacity:0,
          totalCapacity:5,
          manageBy:"aduser",
          delFlag:"0",
          deptId:201,
          deptName:"管理部",
          beginTime: null,
          endTime: null,
          userId: null,
          fileCate: null,
          secondId: null,
          thirdId: null,},{
          createBy:"aduser2",
          createTime:"2023-03-27 10:00:14",
          updateBy:"aduser2",
          updateTime:"2023-03-27 10:14:31",
          remark: null,
          firstId:1,
          firstNo:"G11",
          leftCapacity:0,
          totalCapacity:5,
          manageBy:"aduser2",
          delFlag:"0",
          deptId:207,
          deptName:"管理一部",
          beginTime: null,
          endTime: null,
          userId: null,
          fileCate: null,
          secondId: null,
          thirdId: null,},];},},};</script><style scoped></style>

效果图：