Vue和Element-UI多级联动下拉框实现方法

<template>
  <div>
    <el-select v-model="selectedLevel1" @change="handleLevel1Change">
      <el-option v-for="item in level1Options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="selectedLevel2" @change="handleLevel2Change" v-if="selectedLevel1">
      <el-option v-for="item in level2Options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <!--  可以继续添加更多层级 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      level1Options: [], // 第一级选项
      level2Options: [], // 第二级选项
      selectedLevel1: null,
      selectedLevel2: null,
      //  ...更多层级的数据
      data: [
        {value: 'A', label: 'A', children: [{value: 'A1', label: 'A1'}, {value: 'A2', label: 'A2'}]},
        {value: 'B', label: 'B', children: [{value: 'B1', label: 'B1'}, {value: 'B2', label: 'B2'}]}
      ]
    };
  },
  mounted() {
    this.level1Options = this.data;
  },
  methods: {
    handleLevel1Change(value) {
      const selectedLevel1 = this.data.find(item => item.value === value);
      this.level2Options = selectedLevel1 ? selectedLevel1.children : [];
    },
    handleLevel2Change(value) {
      //  处理第二级选择后的逻辑
    }
  }
};
</script>