批量修改 vue2 el-select

在 Vue.js 中，如果你想要批量修改 `el-select` 组件的状态，你需要先获取到这些组件的引用，通常通过 `v-for` 或者动态绑定的方式。假设你有一个包含多个 `el-select` 的数组，你可以按照以下步骤操作：

1. 获取选中的值：首先，在数据模型中为每个 `el-select` 存储对应的值，如 `selectedOptions` 数组，键通常是选项的唯一标识。

data() {
  return {
    selectedOptions: [],
    // ...其他数据
  }
}

2. 遍历元素并更新选择：在需要修改的函数中，遍历这个数组，并使用 Vue 的 `$set` 方法来安全地更新选中值，例如：

updateSelectValues(newOptions) {
  this.selectedOptions.forEach((option, index) => {
    this.$set(this.selectedOptions, index, option); // 更新对应索引的选择
  });
}

这里的 `newOptions` 是你想设置的新选择项。

3. 触发改变事件：如果你想触发选中状态的变化，可以调用 `el-select` 的 `change` 事件，或者直接操作 `el-option` 元素。

// 调用 change 事件
this.$refs.selects.map(selectEl => selectEl.$el.querySelector('el-option').trigger('change'));

// 直接操作 DOM
this.$nextTick(() => {
  this.$refs.selects.forEach(selectEl => {
    const options = selectEl.$el.querySelectorAll('el-option');
    options.forEach(option => {
      if (option.value === newOptionValue) {
        option.selected = true;
      } else {
        option.selected = false; // 如果不是新选项，则取消选中
      }
    });
  });
});

记得在模板中给每个 `el-select` 组件加上 ref 属性以便引用它们：

<template>
  <div v-for="(select, index) in selects" :key="index">
    <el-select :ref="'select_' + index'" v-model="selectedOptions[index]">
      <!-- ... -->
    </el-select>
  </div>
</template>