element 二级联动下拉框

Element UI 提供了 `el-cascader` 组件来实现级联选择器。你可以在 `el-cascader` 中嵌套多个 `el-option` 组件来实现二级联动下拉框。

具体的实现步骤如下：

1. 在 `data` 中定义级联选择器的选项列表 `options`，每个选项包含 `value` 和 `label` 两个属性，其中 `value` 表示选项的值，`label` 表示选项的显示文本。对于二级联动下拉框，每个选项还需要包含 `children` 属性，表示该选项的子选项列表。
2. 在 `template` 中使用 `el-cascader` 组件，并将 `options` 作为 `options` 属性的值传入组件。
3. 在 `el-cascader` 中嵌套两个 `el-option` 组件，第一个 `el-option` 用来显示一级选项列表，第二个 `el-option` 用来显示二级选项列表。将 `slot-scope="{ options }"` 作为 `el-option` 的属性，以便在 `template` 中通过 `options` 访问当前选项的子选项列表。
4. 在 `el-cascader` 的 `change` 事件中更新选项的值。

下面是一个示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    @change="handleSelectionChange"
  >
    <el-option
      :value="option.value"
      :label="option.label"
      :key="option.value"
      v-for="(option, index) in options"
      :disabled="option.disabled"
      :loading="option.loading"
      :no-data-text="option.noDataText"
      :params="option.params"
      :slot-scope="{ options }"
    >
      <el-option
        :value="child.value"
        :label="child.label"
        :key="child.value"
        v-for="(child, childIndex) in options[index].children"
      />
    </el-option>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'dongcheng',
              label: '东城',
            },
            {
              value: 'xicheng',
              label: '西城',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东',
            },
            {
              value: 'minhang',
              label: '闵行',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(value) {
      console.log('Selected value:', value);
    },
  },
};
</script>