elementplus 下拉框多级菜单

Element Plus 是一款基于 Vue.js 的 UI 组件库，它提供了丰富的组件来构建用户界面。在 Element Plus 中，可以使用 Cascader 组件来实现多级下拉菜单。

Cascader 组件可以根据数据源逐级展示下拉选项，用户可以通过点击选择项来进行多级选择。你可以通过传递一个数组作为数据源来定义多级菜单的选项，每个选项可以包含子选项。

下面是一个简单的示例，展示了如何使用 Cascader 组件创建多级下拉菜单：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    placeholder="请选择"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: '1',
          label: '一级菜单',
          children: [
            {
              value: '1-1',
              label: '二级菜单1',
              children: [
                {
                  value: '1-1-1',
                  label: '三级菜单1'
                },
                {
                  value: '1-1-2',
                  label: '三级菜单2'
                }
              ]
            },
            {
              value: '1-2',
              label: '二级菜单2'
            }
          ]
        },
        {
          value: '2',
          label: '一级菜单2'
        }
      ]
    };
  }
};
</script>

在这个示例中，`options` 数组定义了多级菜单的选项，每个选项都有一个 `value` 和一个 `label` 属性，用于指定选项的值和显示文本。如果一个选项还有子选项，可以在该选项下添加一个 `children` 数组，并依次定义子选项。

通过 `v-model` 指令可以将选中的值绑定到 `selectedOptions` 变量上，可以通过读取 `selectedOptions` 变量来获取用户选择的多级菜单的值。

这只是一个简单的示例，你可以根据自己的需求定制更复杂的多级下拉菜单。你可以参考 Element Plus 的官方文档来了解更多关于 Cascader 组件的用法和配置选项。