Vue3+Ts+Pinia+ElementPlus组件Tree使用过程中无法正确渲染动态回显的数据

68 阅读1分钟

需要动态渲染Tree的组件部分:

<el-tree
  ref="menuRef"
  node-key="id"
  :data="dirname"
  show-checkbox
  :props="props"
  v-loading="loading"
  />

这里需要设置ref来绑定DOM来使用elementPlus为我们提供的一些方法,Console.log(menuRef)便可以看到:

image.png

我们需要使用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;
      });
  };