成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何實現(xiàn) React Table 固定列、固定表頭

lijy91 / 1909人閱讀

摘要：所以對的寬度做了計算優(yōu)化，達到自適應(yīng)內(nèi)容寬度，超出一定寬度會自動換行這樣的目的。從而讓開發(fā)更加專注于業(yè)務(wù)，而不是信息。

前段時間在研究并實現(xiàn)了如何實現(xiàn)表格的固定列（fixed column）功能，這里記錄了思路和細節(jié)
表格控件比較復(fù)雜，應(yīng)用場景也很多，需要各種數(shù)據(jù)展示、統(tǒng)計、操作等特性

原文有視頻演示哦

live demo uke-dashboard https://admin.ukelli.com/ ( 用戶名 admin, 密碼 123 ). 介紹一下 uke-dashboard 是一套前后端分離模式的管理后臺前端框架，已經(jīng)經(jīng)過了實際項目的驗證，快速應(yīng)對項目需求。

Ukelli-UI Table 的文檔，此 Table 已經(jīng)在 ukelli-ui 中實現(xiàn)，還有更多表格功能

期望效果

固定表頭

左右各有一個固定的列

自動計算表格 cell 的寬度和高度，并且不能超過一定的長度，并且表頭需要和表體同步寬度，不需要在配置中傳入 UI 相關(guān)的寬度信息

實現(xiàn)細節(jié)

需要分別渲染 3 個表格

mainTable 主體表格

leftFixedTable 左邊的固定列表格

rightFixedTable 右邊固定列表格

監(jiān)聽 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的顯示區(qū)域

向所有的行（ row ）元素 tr 監(jiān)聽 mouseenter 事件，確保鼠標移過對應(yīng)的行所有的表格都有一致的表現(xiàn)

記錄第一列的所有的格子 （ td ）的高度信息，用于給固定表格的格子高度

記錄第一行的格子的寬度信息，給 TableHeader 同步 TableBody 的寬度信息

表格 Column 的寬度

目前主流的 Table 組件實現(xiàn)固定 column 時需要指定 column 的寬度，但是這樣會定義更多 UI 相關(guān)的信息，例如 antd

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    width: 150, // 有 UI 相關(guān)的定義
  },
  {
    title: "Age",
    dataIndex: "age",
    width: 150, // 有 UI 相關(guān)的定義
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];

...

這樣我認為會有一定 問題 ，因為根據(jù)以往的項目來看，這樣會「分散開發(fā)時的注意力」，就算反復(fù)調(diào)試的 width 也未必準確，畢竟內(nèi)容是不確定的。

所以 uke-table 對 column 的寬度做了計算優(yōu)化，達到「column 自適應(yīng)內(nèi)容寬度」，超出一定寬度會自動換行這樣的目的。 從而讓開發(fā)更加專注于業(yè)務(wù)，而不是 UI 信息。

uke-table 文檔: https://ui.ukelli.com/#/Table

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106387.html

相關(guān)文章

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    soasme 評論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    everfly 評論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    張巨偉 評論0 收藏0

  • bootstrap-table實現(xiàn)表頭固定以及列固定

    摘要：之前使用寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研究起來，畢竟我是個后端啊，對于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入 之前使用bootstrap寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研...

    B0B0 評論0 收藏0

  • 今天，你的瀏覽器 “滾動” 了嗎？

    摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動 了嗎？ 序 在 Web 頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應(yīng)對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經(jīng)常...

    leo108 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<