在项目开发中,使用了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。
![](https://i-blog.csdnimg.cn/blog_migrate/915291a1a81921712e59ef475849b3de.png)
递归改造数据
那么,我们就需要自己写一个递归算法来改造一下后台返回的数据,将后台的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的形式了。
![](https://i-blog.csdnimg.cn/blog_migrate/f8f15c6a367eee8a16d8c43c3d68e0d2.png)
抓紧时间练起来吧,兄dei,再不练你就废啦!
记得支持我哦,么么哒,祝您好事成双~~~~~~