处理select选择器回显数据后dom元素无法操作问题

问题描述：

使用element组件库中的el-select组件处理数据，在项目中有个编辑操作，已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。去掉原来的或者勾选新的都不可以。

原因

这里的下拉框我采用的是若依的数据字典循环取值，因为数据层次太多，render函数没有自动更新，需手动强制刷新。

系统：

vue的若依系统

解决办法一：

给select组件添加@change="$forceUpdate()"方法

<el-select
    v-model="userForm.roleIds"
    collapse-tags
    multiple
    @change="$forceUpdate()"
    placeholder="请选择用户角色(可多选)" >
        <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
        >
       </el-option>
 </el-select>

解决办法二：

 <el-form-item label="角色:" prop="roleIds">
          <el-select
            v-model="userForm.roleIds"
            collapse-tags
            multiple
            @change="roleChane"
            placeholder="请选择用户角色(可多选)"
          >
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            >
            </el-option>
        </el-select>
 </el-form-item>
 
 roleChane(){
    this.$forceUpdate();
 }

解决办法三：

使用this.$set方法

//dom元素设置
<el-select  v-model="userForm.roleIds"  collapse-tags multiple   placeholder="请选择用户角色(可多选)"  >
      <el-option v-for="item in roleList"   :key="item.roleId"  :label="item.roleName"  :value="item.roleId"  >
      </el-option>
</el-select>
//js实现
//在点击编辑对表格数据进行复制的接口里进行如下操作
getUserDetail(userId) {
      apiUserDetail({ userId: userId })
        .then((res) => {
          if (res.retcode === "000000") {
            let changeData = { ...res.data };
            // 角色数据处理
            let roleIdArr = [];
            changeData.roles.map((item) => roleIdArr.push(item.roleId));
            this.$set(this.userForm, "roleIds", roleIdArr);
            //this.userForm.roleIds = roleIdArr;$set方法使用理解
            delete this.userForm.roles;//释放详情接口数据角色内存
          } else {
            this.msgError(res.retinfo);
          }
        })
        .catch((err) => {
          this.msgError("请求失败请重试");
        })
        .finally(() => {});
    },

本片文章有参考到如下文档：link.