antd-vue的修改树选择器treeData的属性名(递归实现)

在项目开发中，使用了antd-vue中的树选择器，但是antd-vue的树选择器的treeData的键值对是title和value.
但是我们后台给的数据是title和key,这就对应不上了，所以需要我们递归修改一下数据即可。

问题分析

1.官网实例

 //我们可以看到:tree-data="treeData" 这个tree-data依赖的数据是键值对title和value.
<a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
  >
    <template #title="{ value: val, title }">
      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
      <template v-else>{
    
    { title }}</template>
    </template>
  </a-tree-select>

//这是antd-vue的treeData,有一层层的title和value以及children
  const treeData = ref([
      {
        title: 'parent 1',
        value: 'parent 1',
        children: [
          {
            title: 'parent 1-0',
            value: 'parent 1-0',
            children: [
              {
                title: 'my leaf',
                value: 'leaf1',
              },
              {
                title: 'your leaf',
                value: 'leaf2',
              },
            ],
          },
          {
            title: 'parent 1-1',
            value: 'parent 1-1',
          },
        ],
      },
    ]);

2.现实后台返回的数据

可见，我们后台返回的数据是由title、key和children组成，并且children又是由title、key和children。

递归改造数据

那么，我们就需要自己写一个递归算法来改造一下后台返回的数据，将后台的title和key修改为官网需要的title和value。

//递归函数
let useFormatTree = (data) => {
    // data:传入的需要修改的后台数据
    let item: any = [];//定义一个空数组
    data.map((list) => {//遍历后台数据
        //定义一个空对象
        let newData = {};
        //给后台中的每一项赋值给这个新的对象
        newData.title = list.title;
        newData.value = list.key;
        //判断后台数据这项是不是有children，有的话递归调用，没有的话就为空。
        newData.children = list.children ? useFormatTree(list.children) : []
        //将这个对象push进定义的新数组
        item.push(newData);
    })
    return item;    //返回这个定义的数组，结果就是改造成功的结果。
}

下面让我们看一下改造完成的数据吧，可以看到数据已经改造为title和value的形式了。

---

抓紧时间练起来吧，兄dei，再不练你就废啦！

记得支持我哦，么么哒，祝您好事成双~~~~~~