vue+elementUI dialog中select框切换无效始终只显示一个的问题

在做一个新增编辑的功能时，共用了一个dialog弹出层，弹出层中有一个选择框如图

新增的时候没有问题，可以切换选中不同的选项，但是编辑的时候，出现了无法切换的问题，增加change事件，发现值是变化的，页面就是没变化，应该是没有渲染导致。

最终通过一系列查找，发现是框架有问题，解决方案如下：

//在select框中的change事件中，加一段代码，强制重新渲染 @change="$forceUpdate()"。
<el-select
  v-model="form.channel_code"
  clearable
  filterable
  class="filter-item"
  placeholder="请选择"
  style="width: 110px;"
  @change="$forceUpdate()"
>
  <el-option
    v-for="item in channelCodeList"
    :key="item.channel"
    :label="item.channel"
    :value="item.channel"
  />
</el-select>

$forceUpdate() 在页面初始化的时候，也可以加一下这个。

最终问题解决了，也可以有效的切换选项了。

this.$forceUpdate() 是 Vue.js 框架中的一个实例方法，用于强制 Vue 实例重新渲染。在大多数情况下，Vue 的响应式系统会自动跟踪依赖并更新 DOM，但是当你在 Vue 组件中直接修改了由 Vue 管理的状态之外的数据（比如直接修改了数组索引、或使用了 Object.assign() 等方法修改了对象的属性，而这些修改没有被 Vue 的响应式系统捕获时），你可能需要手动通知 Vue 重新渲染组件。

使用场景

• 直接修改了响应式数据但 Vue 没有检测到：如上所述，当你直接修改了响应式数据（如数组索引或深层嵌套的对象属性），而这些修改没有被 Vue 的响应式系统捕获时，可以使用 this.$forceUpdate() 来强制 Vue 重新渲染组件。
• 优化渲染性能时慎用：虽然 this.$forceUpdate() 可以强制组件重新渲染，但滥用它可能会导致性能问题，因为它会跳过 Vue 的虚拟 DOM 比较和最小更新算法，直接进行 DOM 的更新。