list: [
{
id: 1, parentId: 0, name: "一级菜单A", rank: 1 },
{
id: 2, parentId: 0, name: "一级菜单B", rank: 1 },
{
id: 3, parentId: 0, name: "一级菜单C", rank: 1 },
{
id: 4, parentId: 1, name: "二级菜单A-A", rank: 2 },
{
id: 5, parentId: 1, name: "二级菜单A-B", rank: 2 },
{
id: 6, parentId: 2, name: "二级菜单B-A", rank: 2 },
{
id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3 },
{
id: 8, parentId: 7, name: "四级菜单A-A-A-A", rank: 4 },
{
id: 9, parentId: 0, name: "一级菜单C", rank: 1 },
{
id: 10, parentId: 0, name: "一级菜单end", rank: 1 }
],
/* 转树形数据 */
optionData() {
let cloneData = JSON.parse(JSON.stringify(this.list)); // 对源数据深度克隆
return cloneData.filter(father => {
// 循环所有项,并添加children属性
let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性,并赋值
return father.parentId == 0; //返回第一层
});
}
const infoArr = [
{
category: '指南', name: '设计原则', content: '一致' },
{
category: '指南', name: '设计原则', content: '反馈' },
{
category: '指南', name: '设计原则', content: '效率' },
{
category: '指南', name: '设计原则', content: '可控' },
{
category: '指南', name: '设计原则', content: '正规' },
{
category: '指南', name: '导航', content: '侧向导航' },
{
category: '指南', name: '导航', content: '顶部导航' },
{
category: '组件', name: 'Basic', content: 'Layout' },
{
category: '组件', name: 'Basic', content: 'Color' },
{
category: '组件', name: 'Basic', content: 'Typography' },
{
category: '组件', name: 'Basic', content: 'Icon' },
{
category: '组件', name: 'Basic', content: 'Button' },
{
category: '组件', name: 'From', content: 'Radio' },
{
category: '组件', name: 'From', content: 'Checkbox' },
{
category: '组件', name: 'From', content: 'Input' },
{
category: '组件', name: 'From', content: 'Select' },
{
category: '组件', name: 'Data', content: 'Table' },
{
category: '组件', name: 'Data', content: 'Tag' },
{
category: '组件', name: 'Data', content: 'Progress' },
{
category: '组件', name: 'Data', content: 'Tree' },
{
category: '组件', name: 'Notice', content: 'Alert' },
{
category: '组件', name: 'Notice', content: 'Loading' },
{
category: '组件', name: 'Notice', content: 'Message' },
{
category: '组件', name: 'Notice', content: 'MessageBox' },
{
category: '组件', name: 'Notice', content: 'Notification' },
{
category: '资源', name: 'Axure Components' },
{
category: '资源', name: 'Sketch Templates' },
{
category: '资源', name: '组件交互文档' },
]
function changeData(data) {
// 用来存放新的数组
const treeData = []
// 遍历数组每一项对象
for (let item of data) {
add(item, treeData, 0)
}
return treeData
}
// 遍历data对象每一项,添加label,children属性
function add(data, arr, i) {
if (i >= Object.keys(data).length) return
let val = Object.values(data)[i]
for (let item of arr) {
if (item.label === val) {
add(data, item.children, ++i)
return
}
}
let temp = {
}
temp.label = val
temp.children = []
arr.push(temp)
add(data, temp.children, ++i)
return
}
console.log(changeData(infoArr))