vue2中实现 TDesign 树形懒加载

-耿瑞-2023-09-06 20:42

之前我有写过Element ui的树形懒加载

其主要是通过load函数来实现

而TDesign也是照虎画猫

他也是主要靠load

我们先来看一个基本的组件

html 复制代码

<template>
      <t-tree :data="items" :load="load" />
</template>

<script lang="jsx">

export default {
  data() {
    return {
      items: [
        {
          label: '1',
          children: true,
        },
        {
          label: '2',
          children: true,
        },
      ],
    };
  },
  methods: {
    load(node) {
      console.log(node);
      return new Promise((resolve) => {
        setTimeout(() => {
            let nodes = [
              {
                label: '3',
                children: false,
              },
            ];
          resolve(nodes);
        }, 500);
      });
    },
  },
};
</script>

这里和Element ui不同的是 Element ui的树形load一进来就会触发一次

你可以通过load来加载根目录的数据

但TDesign是只有点击父节点才会触发一进来是不会触发的

所以第一级的数据你要自己想办法弄给树形绑定的 data

像这里我就直接将数据写给了items

如果是请求数据你就要在生命周期里将第一级赋值给 data绑定的属性

然后我们运行项目

然后我们点击这就会触发 load 带出下面层级的数据

我这里是直接无脑返回了

javascript 复制代码

[
	{
	  label: '3',
	  children: false,
	},
];

的数据结构实际中肯定还是要根据父id来的

然后呢这个children就是来控制是否有子集的

你赋值true 他就会显示前面可以展开的那个箭头

设置false 表示没有子集就没有这个箭头了