我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注小歌謠 日常分享前后端知識

前言

今天來講一下平常我們做權限系統中的樹形結構知識
就是如何把對應關系的結構數據轉換為可以一個樹形結構

const data = [{id: 2,pid: 0,path: '/course',name: 'Course',title: '課程管理'},{id: 3,name: 'CourseOperate',path: 'operate',link: '/course/operate',pid: 2,title: '課程操作'},{id: 4,name: 'CourseInfoData',path: 'info_data',link: '/course/operate/info_data',pid: 3,title: '課程數據'},{id: 5,name: 'CourseAdd',path: 'add',link: '/course/add',pid: 2,title: '增加課程'},{id: 6,pid: 0,path: '/student',name: 'Student',title: '學生管理',},{id: 7,name: 'StudentOperate',path: 'operate',link: '/student/operate',pid: 6,title: '學生操作'},{id: 8,name: 'StudentAdd',path: 'add',link: '/student/add',pid: 6,title: '增加學生'},{id: 9,name: '123123',path: '234234',link: '/student/add',pid: 8,title: '增加學生'},{id: 10,name: '234234',path: '345345',link: '/student/add',pid: 9,title: '增加學生'},{id: 11,name: '345345',path: '456456',link: '/student/add',pid: 10,title: '增加學生'} ];

數據大概是以上這樣的
要給他轉換為樹形結構
可以開始直接操作了

基本數據

// 樹形結構數據結構化/*** [* {id: 2,pid: 0,path: '/course',name: 'Course',title: '課程管理',children: [{id: 3,name: 'CourseOperate',path: 'operate',link: '/course/operate',pid: 2,title: '課程操作',children: [{id: 4,name: 'CourseInfoData',path: 'info_data',link: '/course/operate/info_data',pid: 3,title: '課程數據'}]},{id: 5,name: 'CourseAdd',path: 'add',link: '/course/add',pid: 2,title: '增加課程'}]},* {id: 6,pid: 0,path: '/student',name: 'Student',title: '學生管理',children: [{id: 7,name: 'StudentOperate',path: 'operate',link: '/student/operate',pid: 6,title: '學生操作'},{id: 8,name: 'StudentAdd',path: 'add',link: '/student/add',pid: 6,title: '增加學生'}]}* ]

結構這樣

兩種方式處理數據

直接上代碼 可以自己調試

const treeData = formatDataTree(data);console.log(treeData);// function formatDataTree (data) { // let parents = data.filter(p => p.pid === 0), // children = data.filter(c => c.pid !== 0);// dataToTree(parents, children);// return parents; // // parents childrens array [] // function dataToTree (parents, children) { // parents.map(p => { // children.map((c, i) => { // if (c.pid === p.id) { // let _children = JSON.parse(JSON.stringify(children)); // _children.splice(i, 1); // dataToTree([c], _children); // if (p.children) { // p.children.push(c); // } else { // p.children = [c]; // } // } // }); // }) // } // }function formatDataTree (data) {let _data = JSON.parse(JSON.stringify(data));return _data.filter(p => {const _arr = _data.filter(c => c.pid === p.id);_arr.length && (p.children = _arr);return p.pid === 0;}); }

打印結果

總結

以上是生活随笔為你收集整理的js实现树形结构化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。