当接口返回的节点少比如一两个id数组,或者十来个id数组,我使用 permissionTreeRef.value.setCheckedKeys(data.data);方法完全没发现有啥问题,当节点很多的时候,比如接口返回了三十个id数组,结果发现勾选的数量对不上,于是决定换一个方法试试,使用了permissionTreeRef.value.setChecked(item, true, false);方法,问题解决,勾选数量都对得上
然后又使用了permissionTreeRef.value.setCheckedNodes(data.data);发现也好用,希望后续的element-plus更新能解决
总结清空勾选节点的方法
javascript
permissionTreeRef.value.setCheckedKeys([]);
permissionTreeRef.value.setCheckedNodes([]);
javascript
//少量节点好用
proxy.axios
.get(`/pcadmin/regulator-role-manage/roles/${row.id}/permissions`)
.then(({ data }: { data: any }) => {
if (data.data.length != 0) {
//设置当前选中的节点的key数组,这里key是id
permissionTreeRef.value.setCheckedKeys([]);
setTimeout(() => {
permissionTreeRef.value.setCheckedKeys(data.data);
}, 500);
} else {
permissionTreeRef.value.setCheckedKeys([]);
//permissionTreeRef.value.setCheckedNodes([]);
}
})
.catch((err: any) => {
console.error(err);
});
推荐使用,完整代码
javascript
<el-tree
ref="permissionTreeRef"
style="max-width: 300px; margin: 0 auto"
:data="permissionTreedata"
show-checkbox
default-expand-all
node-key="id"
:props="defaultProps"
/>
const permissionTreeRef = ref();
proxy.axios
.get(`/pcadmin/regulator-role-manage/roles/${row.id}/permissions`)
.then(({ data }: { data: any }) => {
if (data.data.length != 0) {
//设置当前选中的节点的key数组,这里key是id
permissionTreeRef.value.setCheckedNodes([]);
setTimeout(() => {
data.data.forEach((item: any) => {
permissionTreeRef.value.setChecked(item, true, false);
});
}, 500);
} else {
// permissionTreeRef.value.setCheckedKeys([]);
permissionTreeRef.value.setCheckedNodes([]);
}
})
.catch((err: any) => {
console.error(err);
});