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);
    });
相关推荐
周之鸥3 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉9 分钟前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导21 分钟前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow27 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
難釋懷33 分钟前
Shell脚本-for循环语法结构
前端·chrome
全栈老李技术面试34 分钟前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog37 分钟前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
Stella252138 分钟前
10前端项目----商品详情页/滚轮行为
前端
阑梦清川1 小时前
AI超级智能体项目教程(二)---后端项目初始化(设计knif4j接口文档的使用)
java·前端·数据库
程序猿--豪1 小时前
webpack详细打包配置,包含性能优化、资源处理...
前端·webpack·性能优化