vue2 多个select联动

可以使用v-model和watch来实现多个select的联动。具体步骤如下：

1. 在模板中定义多个select，每个select绑定不同的v-model。

2. 使用watch监听每个v-model的变化，根据变化来更新下一个select的选项。

下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedFirst" @change="onFirstChange">
      <option v-for="option in firstOptions" :value="option.value">{{ option.label }}</option>
    </select>
    <select v-model="selectedSecond" @change="onSecondChange">
      <option v-for="option in secondOptions" :value="option.value">{{ option.label }}</option>
    </select>
    <select v-model="selectedThird">
      <option v-for="option in thirdOptions" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFirst: '',
      selectedSecond: '',
      selectedThird: '',
      firstOptions: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' },
      ],
      secondOptions: [],
      thirdOptions: [],
    };
  },
  watch: {
    selectedFirst(value) {
      // 根据第一个select的选项更新第二个select的选项
      switch (value) {
        case '1':
          this.secondOptions = [
            { label: '选项A', value: 'A' },
            { label: '选项B', value: 'B' },
          ];
          break;
        case '2':
          this.secondOptions = [
            { label: '选项C', value: 'C' },
            { label: '选项D', value: 'D' },
          ];
          break;
        case '3':
          this.secondOptions = [
            { label: '选项E', value: 'E' },
            { label: '选项F', value: 'F' },
          ];
          break;
      }
      this.selectedSecond = '';
      this.selectedThird = '';
    },
    selectedSecond(value) {
      // 根据第二个select的选项更新第三个select的选项
      switch (value) {
        case 'A':
          this.thirdOptions = [
            { label: '选项1', value: '1' },
            { label: '选项2', value: '2' },
          ];
          break;
        case 'B':
          this.thirdOptions = [
            { label: '选项3', value: '3' },
            { label: '选项4', value: '4' },
          ];
          break;
        case 'C':
          this.thirdOptions = [
            { label: '选项5', value: '5' },
            { label: '选项6', value: '6' },
          ];
          break;
        case 'D':
          this.thirdOptions = [
            { label: '选项7', value: '7' },
            { label: '选项8', value: '8' },
          ];
          break;
        case 'E':
          this.thirdOptions = [
            { label: '选项9', value: '9' },
            { label: '选项10', value: '10' },
          ];
          break;
        case 'F':
          this.thirdOptions = [
            { label: '选项11', value: '11' },
            { label: '选项12', value: '12' },
          ];
          break;
      }
      this.selectedThird = '';
    },
  },
  methods: {
    onFirstChange() {
      // 第一个select的change事件
    },
    onSecondChange() {
      // 第二个select的change事件
    },
  },
};
</script>

在这个示例中，第一个select的选项改变时会触发watch中的selectedFirst方法，然后根据选项更新第二个select的选项。第二个select的选项改变时会触发watch中的selectedSecond方法，然后根据选项更新第三个select的选项。同时，每个select都绑定了自己的v-model，当选项改变时会更新对应的v-model值。