亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

lijy91 / 2022人閱讀

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

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

原文有視頻演示哦

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

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

期望效果

固定表頭

左右各有一個(gè)固定的列

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

實(shí)現(xiàn)細(xì)節(jié)

需要分別渲染 3 個(gè)表格

mainTable 主體表格

leftFixedTable 左邊的固定列表格

rightFixedTable 右邊固定列表格

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

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

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

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

表格 Column 的寬度

目前主流的 Table 組件實(shí)現(xiàn)固定 column 時(shí)需要指定 column 的寬度，但是這樣會(huì)定義更多 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",
  },
];

...

這樣我認(rèn)為會(huì)有一定 問(wèn)題 ，因?yàn)楦鶕?jù)以往的項(xiàng)目來(lái)看，這樣會(huì)「分散開發(fā)時(shí)的注意力」，就算反復(fù)調(diào)試的 width 也未必準(zhǔn)確，畢竟內(nèi)容是不確定的。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106387.html

相關(guān)文章

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

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

    soasme 評(píng)論0 收藏0

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

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

    everfly 評(píng)論0 收藏0

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

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

    張巨偉 評(píng)論0 收藏0

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

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

    B0B0 評(píng)論0 收藏0

  • 今天，你的瀏覽器 “滾動(dòng)” 了嗎？

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

    leo108 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<