vue手写级联选择器

Vue手写级联选择器可以通过组件的嵌套和数据的动态绑定来实现。下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedOption1" @change="handleOption1Change">
      <option v-for="option in options1" :value="option.value">{{ option.label }}</option>
    </select>

    <select v-model="selectedOption2" @change="handleOption2Change">
      <option v-for="option in options2" :value="option.value">{{ option.label }}</option>
    </select>

    <select v-model="selectedOption3">
      <option v-for="option in options3" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption1: '',
      selectedOption2: '',
      selectedOption3: '',
      options1: [
        { value: 'option1-1', label: 'Option 1-1' },
        { value: 'option1-2', label: 'Option 1-2' },
      ],
      options2: [],
      options3: [],
    };
  },
  methods: {
    handleOption1Change() {
      // 根据选中的第一级选项更新第二级选项
      if (this.selectedOption1 === 'option1-1') {
        this.options2 = [
          { value: 'option2-1', label: 'Option 2-1' },
          { value: 'option2-2', label: 'Option 2-2' },
        ];
      } else if (this.selectedOption1 === 'option1-2') {
        this.options2 = [
          { value: 'option2-3', label: 'Option 2-3' },
          { value: 'option2-4', label: 'Option 2-4' },
        ];
      }

      // 清空第二级和第三级选项
      this.selectedOption2 = '';
      this.selectedOption3 = '';
      this.options3 = [];
    },
    handleOption2Change() {
      // 根据选中的第二级选项更新第三级选项
      if (this.selectedOption2 === 'option2-1') {
        this.options3 = [
          { value: 'option3-1', label: 'Option 3-1' },
          { value: 'option3-2', label: 'Option 3-2' },
        ];
      } else if (this.selectedOption2 === 'option2-2') {
        this.options3 = [
          { value: 'option3-3', label: 'Option 3-3' },
          { value: 'option3-4', label: 'Option 3-4' },
        ];
      } else if (this.selectedOption2 === 'option2-3') {
        this.options3 = [
          { value: 'option3-5', label: 'Option 3-5' },
          { value: 'option3-6', label: 'Option 3-6' },
        ];
      } else if (this.selectedOption2 === 'option2-4') {
        this.options3 = [
          { value: 'option3-7', label: 'Option 3-7' },
          { value: 'option3-8', label: 'Option 3-8' },
        ];
      }

      // 清空第三级选项
      this.selectedOption3 = '';
    },
  },
};
</script>

在上述示例代码中，有三个select标签分别用于展示三个级联的选择器。通过v-model指令将选择的值与data中的变量进行绑定，@change事件监听选项改变的事件。handleOption1Change方法用于处理第一级选项改变时的逻辑，根据选中的第一级选项更新第二级选项，并清空第二级和第三级选项。handleOption2Change方法用于处理第二级选项改变时的逻辑，根据选中的第二级选项更新第三级选项，并清空第三级选项。

这样，当选择器中的选项改变时，对应的方法会被调用进行相应的更新操作，实现级联选择器的功能。