摘要:由于目前还未开发树形表格组件,也参阅了网络上部分基于表格封装的开源树形组件,都没有找的太理想可进行二次开发的开源项目,所以就萌生了自行开发树形表格。
由于ElementUI目前还未开发树形表格组件,也参阅了网络上部分基于ElementUI表格封装的开源树形组件,都没有找的太理想可进行二次开发的开源项目,所以就萌生了自行开发树形表格。
本示例提供开发思路,移除了多余的样式,比较适合新手入门学习,如果应用于实际项目还请自行封装。
目前还仅仅实现了视觉的树结构的层级效果和控制结构的显示隐藏,后续还会进行不断的完善和优化,有必要的话会对组件进行二次封装,有点在重复造论的感觉哈。
效果图 完整代码 页面(tree-table.vue)工具方法TreeTable{{ scope.row.id }}
考虑数组转树和遍历树都是在实际项目中都是非常常用的,所以这边对这两个方法进行了封装。数组转树结构(./utils/array.ts)
export function arrayToTree(list: object[], props = {id: "id", pid: "pid", children: "children"}) { let tree: object[] = []; let map: any = {}; let listLength = list.length; for (let i = 0; i < listLength; i++) { let node: any = list[i]; let nodeId: any = node[props.id]; map[nodeId] = node; } for (let i = 0; i < listLength; i++) { let node: any = list[i]; let nodePid: any = node[props.pid]; let parentNode: any = map[nodePid]; if (parentNode) { parentNode[props.children] = parentNode[props.children] || []; parentNode[props.children].push(node) } else { tree.push(node) } } return tree }遍历树结构(./utils/tree.ts)
结合实际项目应用,我们采用了先序遍历法对树进行遍历,为了方便在业务代码里的应用,在遍历过程中会对每个节点挂载节点访问路径 _idPath 属性和节点深度 _depth 属性。
export function ergodicTree(tree: object[], callback: any = () => {}, props = {id: "id", pid: "pid", children: "children"}) { function _ergodicTree(tree: object[], parentIdPath?: any[], depth: number = 0) { const treeLength = tree.length; for (let i = 0; i < treeLength; i++) { let node: any = tree[i]; const _idPath: any[] = parentIdPath ? [...parentIdPath, node[props.id]] : [node[props.id]]; const _depth: number = depth + 1; node._idPath = _idPath; node._depth = _depth; callback(node); if (node[props.children] && node[props.children] instanceof Array) { _ergodicTree(node[props.children], _idPath, _depth) } } } _ergodicTree(tree); return tree; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103424.html
摘要:本文是译文,原文是我在原文的基础上加了百度的图表库,这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持,使任何元素可拖动,可旋转或可滑动滚动和快速性能的能力。 本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表...
摘要:截止到目前年月日为止,开源库中没有找到可以支持的组件,所以在最新的版本中支持这一特性。所谓的大表格虚拟化,其实就是为表格设置一个较大的数据比如条数据,然后虚拟一个表格隐藏掉不需要显示的数据。在组件之前的版本中,渲染的树形表格的结构是一棵。 背景 有这样一个需求,一位 React Suite(以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio...
摘要:此页面是实现树表格的关健页面。这里就是关健点,因为这个子组件是需要递归实现,所以,需要动态注册到当前组件中。补充一点不要只看部分,部分才是这个树表格的关健所在。 基于vue.js实现树形表格的封装(vue-tree-table) 前言 由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度、google找了一通,并没有发现很靠谱的,也不是很灵活。所以就用vue自己撸了一个...
摘要:为什么我们需要是一个基于的套件库,兼容。全面的国际化支持所有组件的内置文案支持国际化,大部分文案用户可以主动设置。持续的功能增强借助社区和团队自身的力量,会在现有基础上优化使用体验,增强组件功能,添加更多常用组件来满足不同场景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...
阅读 1512·2023-04-26 01:36
阅读 2684·2021-10-08 10:05
阅读 2715·2021-08-05 09:57
阅读 1502·2019-08-30 15:52
阅读 1154·2019-08-30 14:12
阅读 1227·2019-08-30 11:17
阅读 3057·2019-08-29 13:07
阅读 2381·2019-08-29 12:35