树形结构转换

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))

猜你喜欢

转载自blog.csdn.net/weixin_46852620/article/details/113608453