轻松实现可扩展的树形表格

harryhappy 发布于2019-08-23 16:52 / 1033人阅读

摘要：由于目前还未开发树形表格组件，也参阅了网络上部分基于表格封装的开源树形组件，都没有找的太理想可进行二次开发的开源项目，所以就萌生了自行开发树形表格。

由于ElementUI目前还未开发树形表格组件，也参阅了网络上部分基于ElementUI表格封装的开源树形组件，都没有找的太理想可进行二次开发的开源项目，所以就萌生了自行开发树形表格。

本示例提供开发思路，移除了多余的样式，比较适合新手入门学习，如果应用于实际项目还请自行封装。

目前还仅仅实现了视觉的树结构的层级效果和控制结构的显示隐藏，后续还会进行不断的完善和优化，有必要的话会对组件进行二次封装，有点在重复造论的感觉哈。

效果图

完整代码 页面(tree-table.vue)

工具方法

考虑数组转树和遍历树都是在实际项目中都是非常常用的，所以这边对这两个方法进行了封装。

数组转树结构(./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;
        }

云服务器 GPU云服务器 php实现表格可编辑弹性可扩展的云计算服务器计划 php可更改的表格 html表格的可编辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103424.html

12个值得关注的顶级可视化JS库涉及图表、动画、时间处理，表格操作

摘要：本文是译文，原文是我在原文的基础上加了百度的图表库，这个也是毫不逊色其他图表库的。更新记录图表类数据驱动文档通常被称为最强大的开源可视化库。是迄今为止最好的图表库。在顶级功能支持，使任何元素可拖动，可旋转或可滑动滚动和快速性能的能力。本文是译文，原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库，这个也是毫不逊色其他图表...

JinB 2019-08-20 14:14 评论0 收藏0
开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件

摘要：截止到目前年月日为止，开源库中没有找到可以支持的组件，所以在最新的版本中支持这一特性。所谓的大表格虚拟化，其实就是为表格设置一个较大的数据比如条数据，然后虚拟一个表格隐藏掉不需要显示的数据。在组件之前的版本中，渲染的树形表格的结构是一棵。背景有这样一个需求，一位 React Suite（以下简称 rsuite）的用户，他需要一个 Table 组件能够像 Jira Portfolio...

shenhualong 2019-08-23 14:52 评论0 收藏0
基于vue.js实现树形表格的封装

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。基于vue.js实现树形表格的封装（vue-tree-table）前言由于公司产品（基于vue.js）需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个...

yedf 2019-08-26 12:09 评论0 收藏0
UXCore：一个兼容主流浏览器的 React PC 组件库

摘要：为什么我们需要是一个基于的套件库，兼容。全面的国际化支持所有组件的内置文案支持国际化，大部分文案用户可以主动设置。持续的功能增强借助社区和团队自身的力量，会在现有基础上优化使用体验，增强组件功能，添加更多常用组件来满足不同场景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...

Big_fat_cat 2019-08-19 18:38 评论0 收藏0