Ant Design of Vue的树形控件Tree的使用

基本使用

配置项

replaceFields

数据渲染属性依赖3个字段：
title、key、children
没有其他可携带的用户数据
对接实际后台返回的数据，很多时候不是直接的title、key可以让我们直接渲染，这个时候_replaceFields_ 就派上了用场。
举栗：:replaceFields="{ title: 'buildingName', key: 'buildingId' }"
这里的buildingName作为title渲染，buildingId作为key
需要注意的是：设置为key的字段，一定要确保它的唯一性哦！！！

treeData

树节点渲染的数据
两种方法设置：
1、手动构造

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
    ],
  },
];

2、返回的接口数据构造
在这里呢，同样有两种情况，子树的数据
①同一个接口获取
这里建议使用控件里面的异步加载loadData，详细介绍请移步配置项介绍处。
实现方式是：进入页面即调用getTree的方法，拿到主树的数据，其后每展开一层就会调用它的onLoadData方法，构造子树数据作为children放在主树对应的节点下。
举栗：:load-data="onLoadData"

    // 获取部门树
    getTree() {
      classTree()
        .then((res) => {
          if (res.data.code == '200') {
            let data = res.data.result.treeobject;
            if (!this.defaultSelectedkeys.length) {
              this.defaultSelectedkeys.push(data.buildingId);
            }
            let obj = {
              title: data.buildingName,
              key: data.buildingId,
            };
            this.treeData.push(obj);
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //异步加载树形数据
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        co