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更新能解决

总结清空勾选节点的方法

 permissionTreeRef.value.setCheckedKeys([]);
 permissionTreeRef.value.setCheckedNodes([]);
//少量节点好用
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);
    });

推荐使用,完整代码

<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);
    });

Vue 3,可以使用`el-tree`组件根据给定的key值进行数据回显。以下是一个使用TypeScript的示例: 首先,在Vue组件引入`el-tree`组件和相关数据: ```typescript <template> <div> <el-tree :data="treeData" :default-expanded-keys="[defaultExpandedKey]" :default-checked-keys="[defaultCheckedKey]"></el-tree> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { treeData: [ { label: 'Node 1', key: '1', children: [ { label: 'Node 1-1', key: '1-1', children: [ { label: 'Node 1-1-1', key: '1-1-1' }, { label: 'Node 1-1-2', key: '1-1-2' } ] }, { label: 'Node 1-2', key: '1-2', children: [ { label: 'Node 1-2-1', key: '1-2-1' }, { label: 'Node 1-2-2', key: '1-2-2' } ] } ] } ], defaultExpandedKey: '1-1', // 默认展开的节点key defaultCheckedKey: '1-2-2' // 默认选的节点key }; } }); </script> ``` 在上述示例,我们使用了`defineComponent`导入Vue的`defineComponent`函数,以支持TypeScript的类型推断。 在`data`,我们定义了`treeData`数组,包含树形结构数据。每个节点对象都有`label`和`key`属性,用于显示节点名称和唯一标识节点。使用`children`属性来表示子节点。 在`el-tree`组件,通过`:default-expanded-keys`属性可以设置默认展开的节点。在这个例子,我们设置了`defaultExpandedKey`为`1-1`,表示默认展开的节点是`Node 1-1`。 同样地,通过`:default-checked-keys`属性可以设置默认选的节点。在这个例子,我们设置了`defaultCheckedKey`为`1-2-2`,表示默认选的节点是`Node 1-2-2`。 根据需求,你可以将`defaultExpandedKey`和`defaultCheckedKey`设置为你想要的节点key值,来实现根据key进行数据回显
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值