本文主要是介绍vue数据转树状结构进阶(两级父节点),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
需求:不仅按照项目还要按照教师名称
let dataX = [{"uuid": "04991AB0ED31413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "be083f6f10bc4168b6d04106f14b5b68","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED36413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "65f9ced819a74c879c640082772383d6","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED35413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "23b7e94695ef49cc860ca32fd60d795d","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED34413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "81686d4bf5684f57a2a55b275527b02b","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED33413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "d0a8c90d5e1746f6a6aa279136a3ee0d","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED30413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": null,"courseTime": "2023-09-01 08:30-09:15","resourceId": null,"resourceName": null,"sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 3.0,"theoryPracticeRemark": null,"instruct": 20.0,"instructRemark": null,"useSample": 1.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 84.0,"evalRemark": "李宁哦哦","evalId": "002E0518DD5074F2E065000000000001","evalStatus": "1","saveTime": "2023-09-05 16:19:38"},{"uuid": "04991AB0ED32413EE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "eab61e92f937437caf94f4928d21fb2d","projName": "TEST0901_0928","trainId": "0901_0928","courseId": null,"courseName": "气象课1","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "403ab08d05f44c9d84e479fe0f1f0d8a","evalStatus": "0","saveTime": "2023-09-05 16:19:38"},{"uuid": "036A074BBF947EABE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "dcf44c6f3cde454fa50116aebff08b6e","projName": "测试0821","trainId": "px-2023-0821","courseId": null,"courseName": null,"courseTime": "2023-08-21 08:30-16:15","resourceId": "02ED47ECE717763CE065000000000001","resourceName": "管训楼107","sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 1.0,"classTimeRemark": null,"comEvaluation": 81.0,"evalRemark": "sdsd","evalId": "d54d97c1550c422ca0e163c132389ee5","evalStatus": "1","saveTime": "2023-08-21 14:35:23"},{"uuid": "036A074BBF927EABE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "dcf44c6f3cde454fa50116aebff08b6e","projName": "测试0821","trainId": "px-2023-0821","courseId": null,"courseName": "气象课","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "F6D8BE2B9FCD6B8AE055000000000001","evalStatus": "0","saveTime": "2023-08-21 14:35:23"},{"uuid": "036A074BBF937EABE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "dcf44c6f3cde454fa50116aebff08b6e","projName": "测试0821","trainId": "px-2023-0821","courseId": null,"courseName": "气象课","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "fec1d3cb91cc4dc89a38d4b2935a6e93","evalStatus": "0","saveTime": "2023-08-21 14:35:23"},{"uuid": "036A074BBF957EABE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "dcf44c6f3cde454fa50116aebff08b6e","projName": "测试0821","trainId": "px-2023-0821","courseId": null,"courseName": "气象课","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "adb8d5b000164402b853d6f2f40b7b95","evalStatus": "0","saveTime": "2023-08-21 14:35:23"},{"uuid": "036A074BBF967EABE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "dcf44c6f3cde454fa50116aebff08b6e","projName": "测试0821","trainId": "px-2023-0821","courseId": null,"courseName": "气象课","courseTime": null,"resourceId": null,"resourceName": null,"sense": null,"senseRemark": null,"preLesson": null,"preLessonRemark": null,"familiarity": null,"familiarityRemark": null,"importance": null,"importanceRemark": null,"theoryPractice": null,"theoryPracticeRemark": null,"instruct": null,"instructRemark": null,"useSample": null,"useSampleRemark": null,"methods": null,"methodsRemark": null,"classTime": null,"classTimeRemark": null,"comEvaluation": null,"evalRemark": null,"evalId": "236690bf31504e9f85b3c442a843fa7d","evalStatus": "0","saveTime": "2023-08-21 14:35:23"},{"uuid": "028A0F7F209E546DE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "e90a05335e584824947cb8cd4ad461e0","projName": "测试0809","trainId": "0809","courseId": null,"courseName": null,"courseTime": "2023-08-10 08:30-10:15","resourceId": "F8A2B4EE72586516E055000000000001","resourceName": "训练楼103","sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 0.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 80.0,"evalRemark": "fvdsgsdfg","evalId": "002E0518DD5074F2E065000000000001","evalStatus": "1","saveTime": "2023-08-10 11:19:14"},{"uuid": "0176C00FA5180EE9E065000000000001","teacherId": "f9dde5be35844417ac9cc6aabc0234d5","teacherName": "陆虎","planId": "a10aee22727848e8af8010f954df2241","projName": "测试0710","trainId": "Test-0710","courseId": null,"courseName": null,"courseTime": "2023-03-21 08:30-16:15","resourceId": null,"resourceName": null,"sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 0.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 0.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 70.0,"evalRemark": "gdsg","evalId": "002E0518DD5074F2E065000000000001","evalStatus": "1","saveTime": "2023-07-27 19:03:00"},{"uuid": "00692761019E04EAE065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "f590b85ba0a944e381514386298c4038","projName": "2023第4期气象培训","trainId": "PX-2023-04","courseId": null,"courseName": "F82C91AFB3781D54E055000000000001","courseTime": "2023-07-24 08:30-09:15","resourceId": "F8A2B4EE72586516E055000000000001","resourceName": "训练楼103","sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 90.0,"evalRemark": null,"evalId": "002E0518DD5074F2E065000000000001","evalStatus": "1","saveTime": "2023-07-14 09:13:17"},{"uuid": "005DCEF6927C1A65E065000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "db6a0ef66dcd4e57afa4af49f7a1081f","projName": "2023第1期培训","trainId": "PX-2023-01","courseId": null,"courseName": "F82C91AFB3781D54E055000000000001","courseTime": "2023-08-01 08:30-10:15","resourceId": "F8A2B4EE72586516E055000000000001","resourceName": "训练楼103","sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 90.0,"evalRemark": null,"evalId": "002E0518DD5074F2E065000000000001","evalStatus": "1","saveTime": "2023-07-13 19:41:09"},{"uuid": "FF43EE3BC4F05CC4E055000000000001","teacherId": "f9dde5be35844417ac9cc6aabc0234d5","teacherName": "陆虎","planId": "4cf36ce4c8e542b0ae0d111ff2a85ae7","projName": "测试0629","trainId": "test-0629","courseId": null,"courseName": "F842FE12AF2E317DE055000000000001","courseTime": "2023-06-26 08:30-10:15","resourceId": "F8A2B4EE72586516E055000000000001","resourceName": "训练楼103","sense": 10.0,"senseRemark": null,"preLesson": 8.0,"preLessonRemark": null,"familiarity": 8.0,"familiarityRemark": null,"importance": 9.0,"importanceRemark": null,"theoryPractice": 9.0,"theoryPracticeRemark": null,"instruct": 15.0,"instructRemark": null,"useSample": 9.0,"useSampleRemark": null,"methods": 8.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 86.0,"evalRemark": null,"evalId": "81686d4bf5684f57a2a55b275527b02b","evalStatus": "1","saveTime": "2023-06-29 20:09:48"},{"uuid": "FF43EE3BC4F15CC4E055000000000001","teacherId": "f9dde5be35844417ac9cc6aabc0234d5","teacherName": "陆虎","planId": "4cf36ce4c8e542b0ae0d111ff2a85ae7","projName": "测试0629","trainId": "test-0629","courseId": null,"courseName": "F842FE12AF2E317DE055000000000001","courseTime": "2023-06-26 08:30-10:15","resourceId": "F8A2B4EE72586516E055000000000001","resourceName": "训练楼103","sense": 10.0,"senseRemark": null,"preLesson": 9.0,"preLessonRemark": null,"familiarity": 8.0,"familiarityRemark": null,"importance": 7.0,"importanceRemark": null,"theoryPractice": 9.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 83.0,"evalRemark": null,"evalId": "23b7e94695ef49cc860ca32fd60d795d","evalStatus": "1","saveTime": "2023-06-29 20:09:48"},{"uuid": "FF4469B721DA734AE055000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "4cf36ce4c8e542b0ae0d111ff2a85ae7","projName": "测试0629","trainId": "test-0629","courseId": null,"courseName": "FD0CF1D6E5241FCEE055000000000001","courseTime": "2023-06-27 08:30-09:15","resourceId": "F8A2B4EE725A6516E055000000000001","resourceName": "管训楼102","sense": 10.0,"senseRemark": null,"preLesson": 9.0,"preLessonRemark": null,"familiarity": 8.0,"familiarityRemark": null,"importance": 8.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 20.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 9.0,"classTimeRemark": null,"comEvaluation": 94.0,"evalRemark": null,"evalId": "23b7e94695ef49cc860ca32fd60d795d","evalStatus": "1","saveTime": "2023-06-29 19:58:05"},{"uuid": "FF4469B721D9734AE055000000000001","teacherId": "fd79ec5259364284875cb8e87a6cdda5","teacherName": "王菲","planId": "4cf36ce4c8e542b0ae0d111ff2a85ae7","projName": "测试0629","trainId": "test-0629","courseId": null,"courseName": "FD0CF1D6E5241FCEE055000000000001","courseTime": "2023-06-27 08:30-09:15","resourceId": "F8A2B4EE725A6516E055000000000001","resourceName": "管训楼102","sense": 10.0,"senseRemark": null,"preLesson": 10.0,"preLessonRemark": null,"familiarity": 10.0,"familiarityRemark": null,"importance": 10.0,"importanceRemark": null,"theoryPractice": 10.0,"theoryPracticeRemark": null,"instruct": 10.0,"instructRemark": null,"useSample": 10.0,"useSampleRemark": null,"methods": 10.0,"methodsRemark": null,"classTime": 10.0,"classTimeRemark": null,"comEvaluation": 90.0,"evalRemark": null,"evalId": "81686d4bf5684f57a2a55b275527b02b","evalStatus": "1","saveTime": "2023-06-29 19:58:05"}]
// 深拷贝
function deepClone(data) {let dataType = getDataType(data);let container;if (dataType === 'Object') {container = {};}if (dataType === 'Array') {container = [];}for (const key in data) {let type = getDataType(data[key]);if (key === 'Array' || type === 'Object') {container[key] = deepClone(data[key]);} else {container[key] = data[key];}}return container;
}
// 判断数据类型
function getDataType(data) {return Object.prototype.toString.call(data).slice(8, -1);
}
function addProAndTeach(data){// 添加一级父节点(project)var afterDeptList = []; // 找项目名var afterTeaData = []; // 将父节点添加进去for (let item of data) {if (!afterDeptList.includes(item.planId)) { // 如果这个项目id没有出现过,就把项目id第一个放进去afterDeptList.push(item.planId);let projName = item.projName + '(' + item.trainId + ')';// 添加一个该项目第一次出现的父节点afterTeaData.push({ uuid: item.planId, pid: '0', projName: projName, trainId: item.trainId, isParent: '1' });item.pid = item.planId;} else {item.pid = item.planId; //父节点出现了,给子节点添加一个索引}}data = [...afterTeaData, ...data];// 添加二级父节点(teacher)let result = [],teacherList = [];for (let item of data) {if (item.pid != '0') { // 如果pid不是0 那么说明有父节点let teacherId = item.teacherId;let planId = item.planId;let pid = planId + teacherId; // 项目名+teacher名if (teacherList.includes(pid)) {item.project = '';item.pid = planId + teacherId;item.projName = item.courseName;result.push(item);} else {teacherList.push(pid);result.push({ uuid: pid, pid: item.planId, projName: item.teacherName, isParent: '1' });//构造日期下的第一个节点let temp = deepClone(item);temp.pid = pid;temp.projName = temp.courseName;result.push(temp);}} else {result.push(item);}}return result
}let y = addProAndTeach(dataX)//自定义id,pid 转为树结构
function getDeptTreeCustom(data, pid, idField, pidField) {if (typeof idField == 'undefined') {idField = 'id';}if (typeof pidField == 'undefined') {pidField == 'pid';}const result = [];let temp;for (let i = 0; i < data.length; i++) {if (data[i][pidField] === pid) { // 如果元素的pid==0temp = getDeptTreeCustom(data, data[i][idField], idField, pidField);if (temp.length > 0) {data[i].children = temp;}result.push(data[i]);}}return result;
}
let all = getDeptTreeCustom(y,'0', 'uuid', 'pid')
console.log(all)
这篇关于vue数据转树状结构进阶(两级父节点)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!