做项目遇到的问题三：ElementUI select下拉框多选回显成功时，点击下拉选项或删除回显数据没有反应！

问题描述

PC端使用ElementUI框架的select多选下拉框，在新增的时候，下拉框的数据可以选中并显示在页面中，但是在编辑回显时，点击下拉框选项或者删除回显的数据，没有反应，但数据已经更新，而视图没有更新。

未改过之前的代码：

<el-select v-model="rowFormTempData.tagIds" clearable filterable multiple>
  <el-option
    v-for="item in m_lsTag"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

原因分析

下拉框的数据是通过调接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。

解决方法

一、$forceUpdate()

<el-select v-model="rowFormTempData.tagIds" clearable filterable multiple @change="handleTagChange">
  <el-option
    v-for="item in m_lsTag"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

handleTagChange(val) {
  this.$forceUpdate();
},

二、ES6扩展运算符(...)

<el-select v-model="rowFormTempData.tagIds" clearable filterable multiple @change="handleTagChange">
  <el-option
    v-for="item in m_lsTag"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  ></el-option>
</el-select>

handleTagChange(val) {
  this.rowFormTempData = { ...this.rowFormTempData };
},