前言:记录一下今天业务开发遇到一个难点,仔细看了数据发现都没问题,但是,默认打开时,树节点默认选中就是不对。
角色名称为 测试 的只有首页权限
角色名称为 系统管理员 的有全部权限
问题复现
我第一打开角色名称为 测试 的时候是正常的,我在打开 系统管理员 时默认选中节点也是正常的,这时问题来了,当我再去打开 测试 角色的权限分配时,发现全部节点都勾选上了,就类似受到数据污染似的。如下错误效果图:
离谱的是,去查了数据 default-checked-keys,发现默认打开节点的数据是正确的,这时我就卡住了,仔细想了很久,根据经验,数据具有响应式并且数据也是正确的,就怀疑是渲染先后的问题,于是想到了v-if控制el-tree组件的渲染。试用后发现真的就解决了
解决办法
<el-tree
v-if="isShowTree" //使用v-if控制组件渲染
:data="treeData"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defaultCheckedKeys"
:props="defaultProps"
@check="checkChange"
/>
打开弹框,调取接口,获取数据后,isShowTree设置为true
if (res.code === 1) {
defaultCheckedKeys.value = res.data;
//从后台获取到数据后,在把isShowTree 设置为true
isShowTree.value = true
}
弹框关闭后在把isShowTree 设置为false
const handleClose = () => {
ruleFormRef.value?.resetFields();
isShowTree.value = false //设置为false
};
最终完美解决问题!
希望本篇文章能帮到您!