【ant design vue】a-tree树形组件获取数据及回显

1.获取数据

首先，数据自然是tree结构的，这中间自然会有一些对数据的处理，说一下常用处理：

• 将扁平化数据处理为tree结构数据  https://blog.csdn.net/thcoding_cat/article/details/113697354
• 将数据的属性处理为组件要求的属性
• 解决该组件的一些问题，优化

 1.将数据的属性处理为组件要求的属性

 使用组件提供的该属性:replaceFields="{ key:'id',title:'name',children:'children'}"

<a-tree
    :replaceFields="{ key:'id',title:'zhName',children:'children'}"
    v-model="checkedKeys"
/>

2.渲染完a-tree组件的时候，组件为收缩状态，希望为展示状态

渲染组件数据时，组件为收缩状态，如下：

那我们想要渲染完组件是展开的，如下：

解决方法，在组件上使用v-if对渲染的数据（treeData做判断，有数据的时候则渲染）：

<a-tree
    v-if="treeData && treeData.length > 0"
    v-model="checkedKeys"
/>

2.将选中的数据回显到a-tree组件上

a-tree的组件很奇怪，获取时，取到所有tree节点的id，回显时却只需要tree节点最深层的子id,很多人应该这个问题都选择了手写tree组件，我找了很久，终于找到了回显的方法

参考该博客（https://blog.csdn.net/sunnyjingqi/article/details/110202457  ，该作者写的是react版本，但逻辑其实一样）进行如下改造： 

明确一点：我们从后端取到的节点数据为tree结构选中的所有节点的id,但实际上，我们只需要获取最深层的子id来进行展示

1.从完整的treeData遍历出最深层的节点（所有子节点及没有子节点的节点）

//methods中的方法
deepList(data){
     data.map((item) => {
     if (item.children && item.children.length > 0) {
           this.deepList(item.children);
        } else {
            //test数组存放  
            this.test.push(item.id);
        }
      });
}


//调用
this.deepList(this.treeData);

2.将后台返回的数据（含父节点的）与该deepList方法遍历出来的结果test数组做一个交集，即取到选中的子节点

//tmpList 后台拿到的结果，为字符串数组，存放的是节点id
const result = [...new Set(this.test)].filter((item) => new Set(eval(this.tmpList)).has(item));

//将结果赋值给v-model绑定的属性
this.checkedKeys = [...result];

3.善后（对a-tree的一些优化处理）

• 有些从后台拿到的数据不是字符串数组，需进行处理，其次，处理后的结构（比如a数组）可能还需要赋值给别的变量（比如a数组赋值给b数组）可将b数组用于一些判断（比如判断a-tree组件节点是否有被选中等等）
• 从后台获取选中的节点数据时，对spinning值（ant design vue的Spin组件）进行变化，这样在选中的节点数据渲染上时会有一个蒙层加载的效果，如下：

<a-spin :spinning="spinning">
   <div class="spin-content">
        <a-tree
         v-if="treeData && treeData.length > 0" 
         :tree-data="treeData"
         class="tree"
         :replaceFields="{ key:'id',title:'name',children:'children'}"
         v-model="checkedKeys"
        />
    </div>
</a-spin>