vue2中实现 TDesign 树形懒加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2中实现 TDesign 树形懒加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

之前我有写过Element ui的树形懒加载
其主要是通过load函数来实现
而TDesign也是照虎画猫
他也是主要靠load

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

<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绑定的属性
然后我们运行项目
vue2中实现 TDesign 树形懒加载,tdesign
然后我们点击这就会触发 load 带出下面层级的数据

我这里是直接无脑返回了

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

的数据结构实际中肯定还是要根据父id来的
然后呢这个children就是来控制是否有子集的
你赋值true 他就会显示前面可以展开的那个箭头
设置false 表示没有子集就没有这个箭头了
vue2中实现 TDesign 树形懒加载,tdesign 文章来源地址https://www.toymoban.com/news/detail-696766.html