開源 UI 庫中，唯一同時實現了大表格虛擬化和樹表格的 Table 組件

shenhualong 發布于2019-08-23 14:52 / 2197人閱讀

摘要：截止到目前年月日為止，開源庫中沒有找到可以支持的組件，所以在最新的版本中支持這一特性。所謂的大表格虛擬化，其實就是為表格設置一個較大的數據比如條數據，然后虛擬一個表格隱藏掉不需要顯示的數據。在組件之前的版本中，渲染的樹形表格的結構是一棵。

背景

有這樣一個需求，一位 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表格組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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