需要动态渲染Tree的组件部分:
<el-tree
ref="menuRef"
node-key="id"
:data="dirname"
show-checkbox
:props="props"
v-loading="loading"
/>
这里需要设置ref来绑定DOM来使用elementPlus为我们提供的一些方法,Console.log(menuRef)便可以看到:
我们需要使用menuRef.value.setChecked来设置回显的选中项;使用 menuRef.value.setCheckedKeys([]); 用于下一次赋值之前清空选中状态。
// 在pinia中的代码store/moudle/users.ts
const checkedID:any = ref(number[])
LocalUserLimitAPI(id)
.then((result) => {
console.log(menuRef);
menuRef.value.setCheckedKeys([]);
localMenuLimit.value = result;
localMenuLimit.value.forEach((element: any) => {
if (element.menu_id) {
checkedID.value.push(element.menu_id);
}
});
menuRef.value.setChecked(checkedID.value, true, false);
})
.finally(() => {
console.log("checkedID.value", checkedID.value);
loading.value = false;
});
};