ElementUI中的el-select中多选回显数据后没法重新选择和更改

场景
ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848

上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。

但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。

实现

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

@change="$forceUpdate()"

添加位置如下

              <el-select
                v-model="form.bcArray"
                placeholder="请选择班次"
                multiple
                clearable
                @change="$forceUpdate()"
                :style="{ width: '200px' }"
              >
                <el-option
                  v-for="dict in bcalldata"
                  :key="dict.bcbh"
                  :label="dict.bcmc"
                  :value="dict.bcbh"
                />
              </el-select>

更改之后

描述：
选中后数据不更新，给数据重新添加  this.$set(this.form,"userId",res.data.userId) 依然没有用

解决方案
$nextTick
作用：vue中的nextTick()是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick()，则可以在回调中获取更新后的 DOM。

forceUpdate
作用：在Vue官方文档中指出，$forceUpdate具有强制刷新的作用，迫使vue实例重新（rander）渲染虚拟dom，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。实例

<el-select 
   v-model="form.userId" 
   @change="selectShenPiRenChange"
   placeholder="请选择状态">
   <el-option
      v-for="item in selectShenPiRenList"
      :key="item.id"
      :label="item.userName"
      :value="item.id">
   </el-option>
</el-select>

// 获取 审批人 的name
    selectShenPiRenChange(val){
      this.form.userId=this.selectShenPiRenList.find(
        item=> item.id==val
      ).id;
      this.form.userName=this.selectShenPiRenList.find(
        item=> item.id==val
      ).userName;
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },

                        
原文链接：https://blog.csdn.net/m0_63026408/article/details/130808174