可能的原因是因为v-for循环创建了多个el-option组件,但是它们都使用了相同的v-model绑定的变量,导致最后一个选项覆盖了之前的选项。解决方法是使用不同的v-model变量来绑定每个el-option组件,例如可以在v-for循环中使用一个数组来保存每个el-option的选中状态。示例代码如下:

<el-form-item label="Select">
  <el-select v-model="selectedOptions" multiple>
    <el-option v-for="(option, index) in options" :key="option.value" :value="option.value" :label="option.label" :selected="selectedOptions[index]"></el-option>
  </el-select>
</el-form-item>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
      selectedOptions: [false, false, false],
    };
  },
};
</script>

在上面的示例代码中,我们使用了一个selectedOptions数组来保存每个el-option组件的选中状态。在el-option组件中,我们使用:selected属性来绑定相应的选中状态。这样就可以确保每个el-option组件都使用了不同的选中状态,而不会相互覆盖。

el-form-item是用v-for循环出来的el-select 中的el-options用v-for循环后选中的永远是最后一个

原文地址: https://www.cveoy.top/t/topic/bp70 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录