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);
    });
相关推荐
1234Wu13 分钟前
React Native 接入 eCharts
javascript·react native·react.js
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊3 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火3 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀7 小时前
html初学者第一天
前端·html
脑袋大大的8 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化