vue 树形结构数据的便捷遍历,及树形结构与平级列表的相互转换(使用xe-utils函数)
使用xe-utils函数便捷处理树形结构数据
·
一.使用xe-utils函数
xe-utils 的api地址:xe-utils 函数库、工具类
二:安装:
npm安装: npm install xe-utils
引用: import XEUtils from 'xe-utils';
1.mapTree (obj, iterate[, options, context]) 从树结构中指定方法后的返回值组成的新数组
children:子节点属性 mapChildren:将子节点映射到指定的属性
let tree1 = [
{ id: 1 },
{
id: 2,
children: [
{ id: 20 }
]
}, {
id: 3,
children: [
{ id: 30 }
]
}
]
let arr1 = XEUtils.mapTree(JSON.parse(JSON.stringify(tree1), item => {
return {
id: item.id * 2
}
})
console.log(arr1)
// [
// { id: 2 },
// {
// id: 4,
// children: [
// { id: 40 }
// ]
// }, {
// id: 6,
// children: [
// { id: 60 }
// ]
// }
// ]
let arr 2 = XEUtils.mapTree(JSON.parse(JSON.stringify(tree1), item => {
return {
id: item.id * 2
}
}, { children: 'childs', mapChildren: 'list' })
console.log(arr2)
// [
// { id: 2 },
// {
// id: 4,
// list: [
// { id: 40 }
// ]
// },
// {
// id: 6,
// list: [
// { id: 60 }
// ]
// }
2.toArrayTree (array, options) 一个高性能的树结构转换函数,将一个带层级的数据列表转成树结构
// 默认树结构
let list1 = [
{id: 1, name: '111'},
{id: 2, parentId: 1, name: '222'},
{id: 3, name: '333'},
{id: 4, parentId: 2, name: '444'}
]
let arr = XEUtils.toArrayTree(list1)
console.log(arr)
/*
[
{
"id":1,
"name":"111",
"children":[
{
"id":2,
"parentId":1,
"name":"222",
"children":[
{
"id":4,
"parentId":2,
"name":"444",
"children":[]
}
]
}
]
},
{
"id":3,
"name":"333",
"children":[]
}
]
*/
3.toTreeArray (array, options) 将一个树结构转成数组列表
let list1 = [
{
"id":1,
"name":"111",
"children":[
{
"id":2,
"parentId":1,
"name":"222",
"children":[
{
"id":4,
"parentId":2,
"name":"444",
"children":[]
}
]
}
]
},
{
"id":3,
"name":"333",
"children":[]
}
]
let arr = XEUtils.toTreeArray(list1)
console.log(arr)
/*
[
{id: 1, name: '111'},
{id: 2, parentId: 1, name: '222'},
{id: 4, parentId: 2, name: '444'}
{id: 3, name: '333'}
]
*/
更多推荐
已为社区贡献3条内容
所有评论(0)