vue3中使用el-tree的setCheckedKeys方法勾选失效回显问题

当接口返回的节点少比如一两个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);
    });
相关推荐
carterwu4 分钟前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face5 分钟前
promise 规范应用
前端
Mintopia5 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face7 分钟前
事件循环
前端·javascript
ONE_Gua9 分钟前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫
CodePencil9 分钟前
CSS专题之盒模型
前端·css
谦谦橘子9 分钟前
服务端渲染原理解析
前端·javascript·react.js
carterwu10 分钟前
umi+模块联邦-配置指南
前端
Mintopia10 分钟前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
ElasticPDF-新国产PDF编辑器14 分钟前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf