Vue.js 中使用 v-for 遍历多个 el-select 实现同步选择

可以使用 v-model 和 watch 来解决这个问题。

首先，在每个 el-select 中添加一个 v-model 绑定一个变量。

然后，在组件中添加一个 watch 监听这个变量的变化，当变量发生改变时，遍历所有 el-select，将它们的选中值都赋值为这个变量的值。

示例代码：

<template>
  <div>
    <el-select v-for="(item, index) in options" :key="index" v-model="selectedOption">
      <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          options: [
            { label: 'Option 1', value: 'option1' },
            { label: 'Option 2', value: 'option2' },
            { label: 'Option 3', value: 'option3' },
          ]
        },
        {
          options: [
            { label: 'Option A', value: 'optionA' },
            { label: 'Option B', value: 'optionB' },
            { label: 'Option C', value: 'optionC' },
          ]
        }
      ],
      selectedOption: ''
    }
  },
  watch: {
    selectedOption(newValue) {
      this.options.forEach(item => {
        item.options.forEach(option => {
          if (option.value === newValue) {
            option.selected = true;
          } else {
            option.selected = false;
          }
        });
      });
    }
  }
}
</script>

在这个例子中，我们遍历了两个 el-select，每个 el-select 包含三个选项。当其中一个 el-select 的选中值发生改变时，watch 监听到了变化，然后遍历所有的选项，将选中值都同步为这个变量的值。

需要注意的是，在这个例子中，我们使用了一个 selected 属性来追踪每个选项是否被选中。这个属性并不是 el-select 组件自带的，我们需要自己添加这个属性，并在 watch 中手动更新它。