ant-design-vue&设置treeDataSimpleMode属性不生效的问题&及其解决方案

环境

1. ant-design-vue 版本 1.7.8
2. 使用官方的树形组件api
3. 添加treeDataSimpleMode属性，一直未出现效果

需要实现的的效果

1. 想要达成树结构的展示（如下图，可以点击节点展示子节点）

2.实际的效果(不是节点展示，而是数据平铺)

我的代码

          <a-directory-tree
            multiple treeDataSimpleMode
            :treeData="treeData"
            :replaceFields="ModeData"
            @select="onSelect"
            @expand="onExpand"
          >
          </a-directory-tree>

<script>
    return {
      treeDataSimpleMode:{ id: 'id', pId: 'pId', rootPId: 0 },
      ModeData: { children: "Node", title: "Name", key: "index"},
      treeData: [
  { id:1,Name: "我的文档", type: "floder", index: "abc",pId:0},
  { id:2,Name: "图片", type: "floder", index: "abc1",pId:1},
  { id:3,Name: "文件", type: "floder", index: "abc2",pId:1}    ],
    };
</script>

发现的问题

1. treeDataSimpleMode只对 <‘a-tree-select’> html标签生效，我使用的是<“a-directory-tree”>。测了很久都没生效，重新阅读了一下结果是这样的原因
2. 通俗讲，就是看看标签选对没有

其他解决方法

1.可以通过修改数据格式，将集合数据转换为树节点数据结构

//递归算法测试

/**
 * List集合--树形结构-数据转换
 */


var list = [
    { id: 1, pId: 0, value: '1', title: 'Expand to load' },
    { id: 2, pId: 1, value: '2', title: 'Expand to load' },
    { id: 3, pId: 1, value: '3', title: 'Tree Node', isLeaf: true },
    { id: 4, pId: 2, value: '3', title: 'Tree Node', isLeaf: true },
    { id: 5, pId: 2, value: '3', title: 'Tree Node', isLeaf: true },
    { id: 6, pId: 3, value: '3', title: 'Tree Node', isLeaf: true },
    { id: 7, pId: 3, value: '3', title: 'Tree Node', isLeaf: true },
]



var TreeFuction = function (list, pid) {
    var tree = []
    for (let i = 0; i < list.length; i++) {
        var aaa = list[i];

        if (aaa.pId === pid) {
            let item = TreeFuction(list, aaa.id);
    
            if (item.length > 0) {
                aaa.children = item;
            }
            tree.push(aaa);
        }
    }
    return tree;
}

var treeNode = TreeFuction(list, 0)

2.达成效果

3.通俗讲，就是造一个官方支持的数据格式

官方文档地址

https://1x.antdv.com/components/tree-select-cn