elementplus 下拉框多级

在 Element Plus 中，可以使用级联选择器（Cascader）来实现多级下拉框的功能。级联选择器允许用户通过多级的选项来选择数据，每个级别的选项都是动态加载的。

以下是一个使用 Element Plus Cascader 实现多级下拉框的示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="props"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: '1',
          label: 'Option 1',
          children: [
            {
              value: '1-1',
              label: 'Option 1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'Option 1-1-1'
                },
                {
                  value: '1-1-2',
                  label: 'Option 1-1-2'
                }
              ]
            },
            {
              value: '1-2',
              label: 'Option 1-2'
            }
          ]
        },
        {
          value: '2',
          label: 'Option 2',
          children: [
            {
              value: '2-1',
              label: 'Option 2-1'
            },
            {
              value: '2-2',
              label: 'Option 2-2'
            }
          ]
        }
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

在上面的代码中，`options` 数组定义了多级下拉框的选项，每个选项都有一个 `value` 和 `label` 属性，以及可选的 `children` 属性表示子选项。`props` 对象定义了选项对象的属性名。

你可以根据自己的需求修改 `options` 数组来定义多级下拉框的选项。在 `handleChange` 方法中，你可以处理用户选择的值。

希望以上信息对你有帮助！如有更多问题，请继续提问。