问题描述:
使用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.