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

在Vue中使用Element UI创建多级下拉菜单，可以使用el-cascader组件。以下是一个简单的例子：

<template>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleChange"
    placeholder="请选择"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'guide',
          label: '指南',
          children: [
            {
              value: 'disciplines',
              label: '学院',
              children: [
                {
                  value: 'forestry',
                  label: '林业学院'
                },
                {
                  value: 'medicine',
                  label: '医学院'
                }
              ]
            },
            {
              value: 'installation',
              label: '安装'
            }
          ]
        },
        {
          value: 'components',
          label: '组件',
          children: [
            {
              value: 'button',
              label: '按钮'
            },
            {
              value: 'table',
              label: '表格'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

在这个例子中，我们定义了一个options属性，它包含了多级的下拉选项。每个选项都是一个对象，拥有value和label属性，如果该项有子选项，则会有一个children数组。

el-cascader组件的v-model绑定了selectedOptions，它会在选项变化时更新，并且提供了一个change事件，可以用来处理选项变化时的逻辑。

这个组件允许用户通过多级菜单选择一个或多个选项，并且能够显示所选择的路径。