开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件

shenhualong 发布于2019-08-23 14:52 / 2196人阅读

摘要：截止到目前年月日为止，开源库中没有找到可以支持的组件，所以在最新的版本中支持这一特性。所谓的大表格虚拟化，其实就是为表格设置一个较大的数据比如条数据，然后虚拟一个表格隐藏掉不需要显示的数据。在组件之前的版本中，渲染的树形表格的结构是一棵。

背景

有这样一个需求，一位 React Suite（以下简称 rsuite）的用户，他需要一个 Table 组件能够像 Jira Portfolio 一样，支持树形数据，同时需要支持大数据渲染。截止到目前（2019年1月18日）为止，开源 UI 库中没有找到可以支持的组件，所以 rsuite 在最新的版本中支持这一特性。

接下来，我们看一下 rsuite 中是怎么支持这两个功能？

大表格虚拟化

首先，我们看一下支持大数据渲染，在页面中渲染过多的 DOM 元素会带来性能问题，必须得有一种解决方案去优化它，我们暂且叫做大表格虚拟化。

所谓的大表格虚拟化，其实就是为表格设置一个较大的数据（比如 10000 条数据），然后虚拟一个表格隐藏掉不需要显示的数据。

为了解决让浏览器渲染的大量 DOM 时候出现的性能问题，我们不能把 10000 条数据都渲染到页面，采用一种方式，只渲染可视范围内数据。同时为表格设置一个滚动条，只有在滚动到需要显示的区域时候才渲染该区域的数据，减少的 DOM 数量。

预览地址

以上这是一个 10000 条数据的 Table，渲染后的 HTML 结构是:

我们可以看到在 Table 中只渲染了 14 个 rs-table-row ，其中第一个和最后一个是没有 children, 只是一个拥有高度的占位符。每一个 rs-table-row 都是绝对定位，所以即使 Table 中删除一个 Row, 或者新增一个 Row ,也不会改变其他 Row 的位置。在这样的基础上，通过获取滚动条的滚动的位置，就很容易判断当前 Row 的 top 值是否在 Table 的可视范围内，同时更新所有的 Row。

很多优秀的库都实现了这样的功能，原理基本一致，比如 react-virtualized 就提供 Table 组件，但是他不支持 Tree。

树形表格

在表格中展示树形数据的需求，我们见得比较多就像甘特图表格展示那样。它有子父层级关系，可以展开子节点。

这样一个表格，很多 Table 组件都支持，但是如果同时需要支持虚拟化就相对比较麻烦，因为在展开关闭节点的时候需要重新计算显示的 DOM 以及设置滚动条的位置。

在 rsuite Table 组件之前的版本中，渲染的树形表格的 DOM 结构是一棵 Tree。所以首先需要把 Tree 拍平，转换一个一维数组，为每一个节点设置父节点，通过父节点的深度渲染 Tree 节点的相对位置。然后就比较好处理，只需要在点击展开关闭节点按钮的时候，处理好数据的过滤。

安装与使用

rsuite 的 Table 组件的设计，对开发还是非常方便，通过

、、、组件定义结构，通过赋值data 属性渲染表格数据。

安装

npm install rsuite --save

如果你在项目只希望用到 Table, 不想安装整个 rsuite 库，你可以多带带安装 rsuite-table

示例代码：

import { Table } from "rsuite";

const { Column, HeaderCell, Cell } = Table;
const data = [{ id: 1, name: "foobar", email: "foobar@xxx.com" }];

ReactDOM.render(

编号姓名邮箱

); 最后

最后，对于一个成熟的 Table 组件怎么能只有这点功能，所以它还支持：

自定义调整列宽

锁定列

自动换行

排序

分页

编辑

合并单元格

自定义单元格

自动列宽

可展开行

剩下唯一的问题，就是您是否在项目中尝试它。

GPU云服务器云服务器 DIV和TABLE表格制作 js清空table表格数据 vuejs表格组件 bootstrap表格组件

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

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

从源码看Element UI Table组件实现思路

摘要：接下来来看一下是如何编写一个组件的，在看源码之前，首先还是要对他的组件的大致功能有一个了解，这样我们在看源码的时候才会知道这一段大概实现了什么功能。最后我实现的功能文档以及最终的一个样例在你实现一个组件过程中，一定要注意一下几点将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中（比如mounted），那么写出来的组件代码将非常丑陋，这样子写出的代码也往往难以维护。...

moven_j 2019-08-20 16:32 评论0 收藏0
vue封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。

摘要：一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后，自动选中该行。单元格内数据样式单元格内按钮，可多个。触发组件绑定函数，参数按钮名称，按钮样式，按钮事件标识。单元格是否可点击的判断函数，可进行复杂的函数判断。 vue-bxz-table 一、封装element-ui的table组件：定义表格高度全屏增加前台分页功能。自定义表头，循环输出整体表结构。表格内编辑（输入框...

henry14 2019-08-26 13:30 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

soasme 2019-08-02 16:07 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

everfly 2019-08-23 14:05 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

张巨伟 2019-08-30 15:54 评论0 收藏0