【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>

效果图：