ElementUI自定义级联选择器

在ElementUI中，可以通过自定义组件的方式来实现一个级联选择器。以下是一个简单的例子，展示了如何创建一个自定义级联选择器：

<template>
  <el-cascader
    :options="options"
    v-model="selectedValue"
    @change="handleCascaderChange"
    placeholder="请选择"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: [],
      options: [
        {
          value: 'option1',
          label: '选项1',
          children: [
            {
              value: 'child1',
              label: '子选项1'
            },
            {
              value: 'child2',
              label: '子选项2'
            }
          ]
        },
        {
          value: 'option2',
          label: '选项2',
          children: [
            {
              value: 'child3',
              label: '子选项3'
            },
            {
              value: 'child4',
              label: '子选项4'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleCascaderChange(value, selectedData) {
      console.log('选中的值:', value, '选中的数据:', selectedData);
    }
  }
};
</script>

在这个例子中，我们定义了一个options属性，它是一个嵌套的对象数组，代表级联选择器的选项。v-model用于双向绑定选中的值。@change事件用于处理选择器的变化，可以在这里添加自定义逻辑。