使用vue实现的树形结构组件BasicTree|江阴雨辰互联

2023年6月22日发(作者：)

使⽤vue实现的树形结构组件BasicTreetree组件的经验总结最近项⽬中有了树形结构的功能需求，要求能够将分类信息使⽤树形结构展⽰、新增节点、删除节点、选择节点等功能，项⽬中使⽤了iview框架作为视图层框架，iview本⾝也提供了树形结构⽰例，但是其ui风格并不符合设计稿需求，没办法⼀开始的想法是请求外援，⽹上找到了jquery的著名插件ztree插件，其功能⾮常强⼤完全符合项⽬的功能性需求，但是由于项⽬是基于vue技术构建，考虑除⾮⾮常必要否则都不⽤jquery插件的原则，⼜找到了开源框架vue-ztree，它是基于ztree使⽤vue实现的树形结构，同样⾮常强⼤，但是ui风格依旧不符合设计稿，也没有看到可以⾃定义ui的地⽅，本着不能谈论别⼈的精彩，让⾃⼰永远是⼀个看客的技术原则，所以尝试开发了这个tree组件，由于技术浅薄所以该组件仅仅为了满⾜个⼈项⽬需要和⾃⼰的技术积累习惯以及给像我⼀样想实现⾃⼰tree组件的⼈⼀个参考写下了这篇⽂章。#⽗组件

...addNode(target) {('监听tree组件',target);}#tree组件通过上述⽅式完全监听不到tree组件往外抛出的事件，我能想到的是因为是递归组件，本⾝就是⾃⾝引⽤，既是⼦组件⼜是⾃⼰的⽗组件，如果像这种⽅式去监听往外抛出的事件需要⼀层层往外抛出，⾮常⿇烦，所以路过的⼤神对于这种情况还望能够详细描述这个事件的传递过程。这种⽅式在我这⾥⾏不通，只能另想别的办法，还好vue提供了vuex作为全局状态管理机制，所以决定所有的事件和传值都通过vuex来进⾏全局注⼊，废话不多说直接贴源码#⽗组件KnowledgeQuery组件#tree组件BasicTree// .....[_TREELIST] (state, val) { st = val; }, [_TREEVALUE] (state, val) { deVal = val; }, [_TREEVALUE] (state) { deVal = ''; }, [_CURRENTINDEX] (state, val) { tIndex = val; }, [_TREEFlAG] (state) { ag = !ag; }, [RE_TREENODE] (state, obj) { let num = obj[0].id; let val = obj[0].name; let rel = eListObjById(st, num); let treeTime = eRandom(); let finalTime = parseInt(treeTime); let treeObj = []; ({ treeNode: { id: finalTime, icon: 'ios-document', name: val }, childs: null }); if ( === null) { = 'ios-book'; = []; } (treeObj[0]); }, [RE_TREENODE] (state, obj) { let parentObj = eListObjById(st, arentId); let parentChildArrays = ; for (let i in parentChildArrays) { if (parentChildArrays[i]. === ) { (i, 1); } } if (!) { = 'ios-document'; = null; } }, [_TREENODEVALUE] (state, val) { deValue = val; }// ..../** * 递归遍历树形结构 * @param trees 数据源 * @param id 节点id值 * @returns {*} */eListObjById = function (trees, id) { if (!id || !trees || !) { return null; } let treeObj = null; for (let item of trees) { if ( === id) { return item; } treeObj = eListObjById(, id); if (treeObj) { return treeObj; } } return null;};/** * 获取当前时间跟上随机数由此⽣成永不重复的数据 * @returns {string} */eRandom = function () { const now = new Date(); let month = th() + 1; let day = e(); let hour = rs(); let minutes = utes(); let seconds = onds(); let time = lYear().toString() + ng() + day + hour + minutes + seconds + ((() * 89 + 100)).toString(); return time;};// // 设置tree结构数据export const SET_TREELIST = 'setTreeList';// 设置知识库搜索框的值export const SET_TREEVALUE = 'setTreeValue';// 删除知识库搜索框的值export const DEL_TREEVALUE = 'delTreeValue';// 设置tree索引export const SET_CURRENTINDEX = 'setCurrentIndex';// 改变tree节点开关export const SET_TREEFlAG = 'setTreeFlag';// 增加tree节点export const ADDSTORE_TREENODE = 'addStoreTreeNode';// 删除tree节点export const DELSTORE_TREENODE = 'delStoreTreeNode';// 设置增加节点的值export const SET_TREENODEVALUE = 'setTreeNodeValue';// 模拟后台树形结构数据{ "tree": [ { "treeNode": { "treeNode": { "id": 1, "icon": "ios-book", "name": "业务知识" }, "childs": [ { "treeNode": { "id": 10, "icon": "ios-book", "name": "业务知识节点1" }, "childs": [ { "treeNode": { "id": 101, "icon": "ios-book", "name": "层级三101" }, "childs": [ { "treeNode": { "id": 1011, "icon": "ios-document", "name": "层级四1011" }, "childs": null }, { "treeNode": { "id": 1012, "icon": "ios-document", "name": "层级四1012" }, "childs": null } ] }, { "treeNode": { "id": 102, "icon": "ios-document", "name": "层级三102" }, "childs": null }, { "treeNode": { "id": 103, "icon": "ios-document", "name": "层级三103" }, "childs": null } ] }, { "treeNode": { "id": 11, "icon": "ios-book", "name": "业务知识节点2" }, "childs": [ { "treeNode": { "id": 111, "id": 111, "icon": "ios-book", "name": "层级三111" }, "childs": [ { "treeNode": { "id": 1111, "icon": "ios-document", "name": "层级四1111" }, "childs": null }, { "treeNode": { "id": 1112, "icon": "ios-document", "name": "层级四1112" }, "childs": null } ] }, { "treeNode": { "id": 112, "icon": "ios-document", "name": "层级三112" }, "childs": null }, { "treeNode": { "id": 113, "icon": "ios-document", "name": "层级三113" }, "childs": null } ] }, { "treeNode": { "id": 12, "icon": "ios-book", "name": "业务知识节点3" }, "childs": [ { "treeNode": { "id": 121, "icon": "ios-document", "name": "层级三121" }, "childs": null }, { "treeNode": { "id": 122, "icon": "ios-document", "name": "层级三122" }, "childs": null }, { "treeNode": { "treeNode": { "id": 123, "icon": "ios-document", "name": "层级三123" }, "childs": null } ] }, { "treeNode": { "id": 13, "icon": "ios-book", "name": "业务知识节点4" }, "childs": [ { "treeNode": { "id": 131, "icon": "ios-document", "name": "层级三131" }, "childs": null }, { "treeNode": { "id": 132, "icon": "ios-document", "name": "层级三132" }, "childs": null }, { "treeNode": { "id": 133, "icon": "ios-document", "name": "层级三133" }, "childs": null } ] }, { "treeNode": { "id": 14, "icon": "ios-book", "name": "业务知识节点5" }, "childs": [ { "treeNode": { "id": 141, "icon": "ios-document", "name": "层级三141" }, "childs": null }, { "treeNode": { "id": 142, "icon": "ios-document", "name": "层级三142" }, "childs": null }, { { "treeNode": { "id": 143, "icon": "ios-document", "name": "层级三143" }, "childs": null } ] }, { "treeNode": { "id": 15, "icon": "ios-book", "name": "业务知识节点6" }, "childs": [ { "treeNode": { "id": 151, "icon": "ios-document", "name": "层级三111" }, "childs": null }, { "treeNode": { "id": 152, "icon": "ios-document", "name": "层级三112" }, "childs": null }, { "treeNode": { "id": 153, "icon": "ios-document", "name": "层级三113" }, "childs": null } ] } ] }, { "treeNode": { "id": 2, "icon": "ios-book", "name": "技术知识" }, "childs": [ { "treeNode": { "id": 20, "icon": "ios-book", "name": "技术知识节点1" }, "childs": [ { "treeNode": { "id": 201, "icon": "ios-document", "name": "层级三201" }, "childs": null "childs": null }, { "treeNode": { "id": 202, "icon": "ios-document", "name": "层级三202" }, "childs": null }, { "treeNode": { "id": 203, "icon": "ios-document", "name": "层级三203" }, "childs": null } ] }, { "treeNode": { "id": 21, "icon": "ios-book", "name": "技术知识节点2" }, "childs": [ { "treeNode": { "id": 211, "icon": "ios-document", "name": "层级三211" }, "childs": null }, { "treeNode": { "id": 212, "icon": "ios-document", "name": "层级三112" }, "childs": null }, { "treeNode": { "id": 213, "icon": "ios-document", "name": "层级三113" }, "childs": null } ] }, { "treeNode": { "id": 22, "icon": "ios-book", "name": "技术知识节点3" }, "childs": [ { "treeNode": { "id": 221, "icon": "ios-document", "name": "层级三221" }, }, "childs": null }, { "treeNode": { "id": 222, "icon": "ios-document", "name": "层级三222" }, "childs": null }, { "treeNode": { "id": 223, "icon": "ios-document", "name": "层级三223" }, "childs": null } ] }, { "treeNode": { "id": 23, "icon": "ios-book", "name": "技术知识节点4" }, "childs": [ { "treeNode": { "id": 231, "icon": "ios-document", "name": "层级三231" }, "childs": null }, { "treeNode": { "id": 232, "icon": "ios-document", "name": "层级三232" }, "childs": null } ] }, { "treeNode": { "id": 24, "icon": "ios-book", "name": "技术知识节点5" }, "childs": [ { "treeNode": { "id": 241, "icon": "ios-document", "name": "层级三241" }, "childs": null } ] }, { "treeNode": { "id": 25, "id": 25, "icon": "ios-book", "name": "技术知识节点6" }, "childs": [ { "treeNode": { "id": 251, "icon": "ios-document", "name": "层级三251" }, "childs": null }, { "treeNode": { "id": 252, "icon": "ios-document", "name": "层级三252" }, "childs": null } ] } ] } ], "success": 1} 新增节点会在当前选择的⽗节点下新增⼦节点，并且原来没有下⼀级的节点成具有下层级的节点，可以⽆限层级添加删除节点如果想在⾃⼰的项⽬中使⽤，请⾃⼰仔细阅读源码，注释已经写的很清楚了，注意后台传过来的树形结构中必须有id为数值类型，并且永不重复，新增节点已经保证了永不重复。该组件还有很多功能有待完善和优化，⽐如多层级节点复选框选择，节点上移下移，后⾯有时间再来慢慢完善，期望能写出⼀个最终可以开源的tree框架，⽬前源码可以⾃由复制修改，但必须写好引⽤博客地址，多谢！

发布者：admin，转转请注明出处：http://www.yc00.com/xiaochengxu/1687386207a6207.html