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);
    });
相关推荐
熊的猫5 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn12 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水44 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust2 小时前
css:基础
前端·css
帅帅哥的兜兜2 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺2 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园2 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称2 小时前
购物车-多元素组合动画css
前端·css