添加字段迭代时ElementPlus el-select已选值消失问题求助

每次添加字段迭代时，ElementPlus的el-select组件及其之前选中的选项都会变为空白，但el-time-select能正常保留已选内容。期望el-select和time-select表现一致，新增字段后仍保留之前选中的内容。

代码示例 #

<el-form-item>
  <template v-for="(day, index) in gateForm.availableDays" :key="index">
      <div style="display: flex; gap: 5px; margin-bottom: 0.5rem">
          <el-select v-model="gateForm.availableDays[index].day" placeholder="Day" value-key="dayId">
              <el-option
                v-for="availableDay in filterAvailableDays"
                :key="availableDay.dayId"
                :label="availableDay.dayName"
                :value="availableDay"
              />
          </el-select>
          <el-time-select
              v-model="gateForm.availableDays[index].timeStart"
              isRange
              placeholder="Start Time"
          />
          <el-time-select
              v-model="gateForm.availableDays[index].timeEnd"
              isRange
              placeholder="End Time"
          />
          <el-button type="primary" @click="addAvailableDays" :disabled="disablePlusButton"><i class="fa-solid fa-plus"></i></el-button>
          <el-button type="danger"><i class="fa-solid fa-minus"></i></el-button>
      </div>
  </template>
</el-form-item>

data() {
return{
  gateForm: {
    gateId: "",
    name: "",
    status: "",
    remarks: "",
    siteId: "",
    availableDays: [
      {
        day: {
            dayId: null,
            dayName: ""
        },
        timeStart: "",
        timeEnd: "",
      },
    ],
  },
  availableDays: [
    { dayId: 1, dayName: "Monday" },
    { dayId: 2, dayName: "Tuesday" },
    { dayId: 3, dayName: "Wednesday" },
    { dayId: 4, dayName: "Thursday" },
    { dayId: 5, dayName: "Friday" },
    { dayId: 6, dayName: "Saturday" },
    { dayId: 0, dayName: "Sunday" },
    ],
  }
  },
computed: {
    filterAvailableDays() {
      return this.availableDays.filter((day) => {
        return!this.gateForm.availableDays.some((availableDay) => {
          return availableDay.day.dayId === day.dayId;
        });
      });
    },
    isRowComplete() {
      return this.gateForm.availableDays.every((day) => {
        return day.day && day.timeStart && day.timeEnd;
      });
    },
    disablePlusButton() {
        return this.gateForm.availableDays.length === this.availableDays.length || !this.isRowComplete;
    },
  },
  methods: {
    async addGate() {
      this.gateDialogFormVisible = true;
    },
    addAvailableDays() {
      console.log("gateForm", this.gateForm);
      this.gateForm.availableDays.push({
        day: {
          dayId: null,
          dayName: ""
        },
        timeStart: "",
        timeEnd: "",
      });
    },
  },

问题根源 #

1. v-for的key使用index：数组新增元素时，Vue虚拟DOM会错误复用组件，导致已选中的select被重新渲染。
2. 选项过滤逻辑问题：filterAvailableDays会移除所有已选中的日期，导致已选的select没有对应选项，从而显示空白。

解决步骤 #

1. 给v-for使用唯一key替代index #

给每个availableDays项添加唯一标识，避免Vue复用错误的组件：

• 修改data初始值：

availableDays: [
  {
    id: Date.now(), // 新增唯一id
    day: {
        dayId: null,
        dayName: ""
    },
    timeStart: "",
    timeEnd: "",
  },
],

• 修改模板中的v-for：

<template v-for="(day, index) in gateForm.availableDays" :key="day.id">

• 修改addAvailableDays方法：

addAvailableDays() {
  this.gateForm.availableDays.push({
    id: Date.now(), // 新增唯一id
    day: {
      dayId: null,
      dayName: ""
    },
    timeStart: "",
    timeEnd: "",
  });
},

2. 调整选项过滤逻辑，保留当前行已选值 #

将filterAvailableDays改为带参数的方法，过滤时排除当前行的已选日期，确保当前行的选中值始终在选项列表中：

• 替换computed的filterAvailableDays为方法：

filterAvailableDays(currentDayId) {
  return this.availableDays.filter((day) => {
    return !this.gateForm.availableDays.some((availableDay) => {
      // 仅排除其他行已选的日期，保留当前行的已选值
      return availableDay.day.dayId === day.dayId && availableDay.day.dayId !== currentDayId;
    });
  });
},

• 修改模板中的el-option部分：

<el-option
  v-for="availableDay in filterAvailableDays(gateForm.availableDays[index].day.dayId)"
  :key="availableDay.dayId"
  :label="availableDay.dayName"
  :value="availableDay"
/>

完成以上修改后，新增字段时el-select会保留之前选中的内容，和el-time-select表现一致。

内容的提问来源于stack exchange，提问作者buzz