vue手写一个element Cascader 级联选择器

Vue.js 自己手动实现 Element UI 的级联选择器 (Cascader) 可能会涉及组件化设计、递归数据结构处理以及用户交互的模拟。这里是一个简单的例子，我们将创建一个基础的 Vue 组件：

<template>
  <div class="cascader">
    <input type="text" v-model="selectedValue" @change="handleChange">
    <ul ref="dropdown" v-if="options && options.length > 0">
      <li v-for="(item, index) in options" :key="index" @click="handleItemClick(item)">
        {{ item.label }}
        <span v-if="item.children && item.children.length > 0">—</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        // 这里可以添加默认的层级选项
        { value: 'parent1', label: '父级 1', children: [{ value: 'child1', label: '子级 1' }] },
        { value: 'parent2', label: '父级 2' },
      ],
    };
  },
  methods: {
    handleChange(value) {
      this.selectedValue = value;
    },
    handleClick(item) {
      if (item.children) {
        this.options = item.children;
      } else {
        this.options = [];
      }
      this.$refs.dropdown.style.display = this.options.length > 0 ? '' : 'none';
    },
  },
};
</script>

<style scoped>
.cascader {
  /* 样式自定 */
}
</style>

在这个示例中，我们创建了一个包含输入框和下拉列表的组件，当用户在输入框中选择或点击下拉项时，`handleChange` 和 `handleItemClick` 方法会更新 `selectedValue` 和显示层级。实际项目中，你可以根据需求添加更多功能，如搜索、回显值等。