VUE element-ui 之多级下拉菜单（筛选框）_elementui 多层级下拉框

<template>
  <el-dropdown>
    <span>{{ selectedCascaderLabels.join('/') }}</span>
    <el-dropdown-menu slot="dropdown">
      <el-cascader
        :options="options"
        v-model="selectedCascaderValues"
        @change="handleCascaderChange"
        :props="cascaderProps"
        clearable>
      </el-cascader>
    </el-dropdown-menu>
  </el-dropdown>
</template>
 
<script>
export default {
  data() {
    return {
      selectedCascaderValues: [],
      cascaderProps: {
        multiple: true,
        checkStrictly: true,
        value: 'id',
        label: 'name',
        children: 'children'
      },
      options: [
        {
          id: 1,
          name: '选项1',
          children: [
            {
              id: 11,
              name: '子选项1-1'
            },
            {
              id: 12,
              name: '子选项1-2'
            }
          ]
        },
        {
          id: 2,
          name: '选项2',
          children: [
            {
              id: 21,
              name: '子选项2-1'
            },
            {
              id: 22,
              name: '子选项2-2'
            }
          ]
        }
      ]
    };
  },
  computed: {
    selectedCascaderLabels() {
      return this.options.reduce((labels, option) => {
        if (this.selectedCascaderValues.includes(option.id)) {
          labels.push(option.name);
        }
        if (option.children) {
          const childLabels = option.children.filter(child => 
            this.selectedCascaderValues.includes(child.id)).map(child => child.name);
          return labels.concat(childLabels);
        }
        return labels;
      }, []);
    }
  },
  methods: {
    handleCascaderChange(value, selectedData) {
      console.log('Selected value:', value);
      console.log('Selected data:', selectedData);
    }
  }
};
</script>

这个代码实例展示了如何在Vue.js和Element UI中创建一个可清除的多级下拉菜单，它使用了el-dropdown来实现下拉效果，并且结合了el-cascader组件来实现多级联动的筛选框。代码中使用计算属性来动态获取选中项的标签，并在下拉菜单中显示。这个例子简洁明了，并且注重于实现核心功能，便于理解和应用。