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

最新推荐文章于 2024-09-07 16:06:50 发布

喝西瓜汁的兔叽Yan

最新推荐文章于 2024-09-07 16:06:50 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作栏目文章标签：前端 vue.js

本文链接：https://blog.csdn.net/Yan9_9/article/details/129020355

工作栏目专栏收录该内容

34 篇文章

订阅专栏

在项目开发中，遇到antd-vue的树选择器要求treeData的键值对为title和value，但后端返回的数据是title和key。为了解决这个问题，需要编写一个递归函数，将后端数据转换为匹配tree选择器的格式。通过遍历和创建新的数据结构，将key替换为value，成功转换了数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中，使用了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的形式了。