需求：

antd Table 只有 列固定 和表頭固定，但是 我的需求是 行固定 前 三行固定。

實現步驟

方式一、表格固定行（rowClassName 實現）

思路是 ：用position: sticky來實現

position: sticky是一個吸頂的效果，滾動時 會固定在頂部

然后借用top 屬性 即可 這里注意 top 并不是固定的，因為

?第一行距離頂部 0

第二行 就是 第一行的高度

第三行 就是 第一行和地二行 高度和

最后使用 rowClassName 實現 。判斷 其 下標 給 不同的 類名即可。

代碼如下：

?jsx代碼：

import React, { Component } from 'react'; import { Table } from 'antd'; import "../../assets/index.css"; class Index extends Component {constructor(props) {super(props)this.state = {columns: [{title: 'Name',dataIndex: 'name',width: 150,},{title: 'Age',dataIndex: 'age',width: 150,},{title: 'Address',dataIndex: 'address',},],data: []}}componentDidMount() {const data = [];for (let i = 0; i < 100; i++) {data.push({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,});}this.setState({data: data})}fixedTop = (record, index) => {let top = 0;if (index < 3) {let name = `fiexdTr${index}`return name;} else {return}}render() {const { data, columns } = this.state;return (<div><Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} rowClassName={this.fixedTop} /></div>);} }export default Index

css代碼：

.fiexdTr0 {position: sticky;z-index: 100000;top: 0;background: red }.fiexdTr1 {position: sticky;z-index: 100000;top: 54px;background: red }.fiexdTr2 {position: sticky;z-index: 100000;top: 108px;background: red }

這個是?一個我寫的在線的例子 ：

表格固定行（rowClassName 實現）-Ant Design Demo -在線案例

這個方法 其實有些 雞肋，比如 要固定的行數 不固定，那就不適用了 。?

方式二、表格固定行（rowClassName 實現、固定行數 為動態）

思路：

利用 js的方式 ：

1.給Table 加一個 id

2.獲取 .table body?

3.獲取 table body里的tr 合集

4. 就可以 根據 下標 判斷 給其 加 樣式了（用 cssText,當然 其它屬性也可以 比如 setAttribute等等）

需要注意： 必須等表格 渲染完成 再設置 樣式，如果 出不來 ，可以加個 定時器 setTimeOut。

不過 在 create-app里 不需要考慮這個 。只有案例 里需要考慮

jsx代碼：

import React, { Component } from 'react'; import { Table } from 'antd';import "../../assets/index.css"; class Index extends Component {constructor(props) {super(props)this.state = {columns: [{title: 'Name',dataIndex: 'name',width: 150,},{title: 'Age',dataIndex: 'age',width: 150,},{title: 'Address',dataIndex: 'address',},],data: []}}componentDidMount() {const data = [];for (let i = 0; i < 100; i++) {data.push({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,});}this.setState({data: data})}fixedTop = (record, index) => {let table = document.getElementById("table1"); //獲取 tabel domif (table) { //如果 table存在let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //獲取 table的 bodylet trs = tableBody.getElementsByTagName("tr"); //獲取 table body的 tr合集let top = 0; // top值if (index < 3) {if (index == 0) {top = 0;} else {top = index * 54;}if (trs[index]) { //設置樣式trs[index].style.cssText = `position: sticky;z-index: 100000;background: red;top:${top}px;`}} else {return}}}render() {const { data, columns } = this.state;return (<div><Table id="table1" columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }}rowClassName={this.fixedTop} /></div>);} }export default Index

這個是?一個我寫的在線的例子 ：?

表格固定行（rowClassName 實現,固定行為動態）-Ant Design Demo-在線案例

其實這個也是有缺陷的，設置樣式 按道理 只用一次就行，使用?rowClassName 就會運行很多次 。

?這個 寫法 其實 也有缺陷 就是 tr的高度 不固定 那就 沒法實現了。所以 我又優化了一下，使用 js 動態獲取 tr的高度（clientHeight 屬性） 相加 即可。

fixedTop = (record, index) => {let table = document.getElementById("table1"); //獲取 tabel domif (table) { //如果 table存在let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //獲取 table的 bodylet trs = tableBody.getElementsByTagName("tr"); //獲取 table body的 tr合集let top = 0; // top值if (index < 3) {if (index == 0) {top = 0;} else {// clientHeight 的值 = 元素內容(這里是高度)+上下paddingtop +=trs[index].clientHeight; // 動態 獲取 tr的高度}if (trs[index]) { //設置樣式trs[index].style.cssText = `position: sticky;z-index: 100000;background: red;top:${top}px;`}} else {return}}}

方式三、

思路：在 componentDidMount 里 調用 設置樣式的函數 這樣的話 性能可能會好一些。

方式二 用rowClassName 這個 會運行 很多次，有多少調條數據 運行 多少次 ，所以 需要優化一下。

下面這個 做了優化?

import React, { Component } from 'react'; import { Table } from 'antd'; import "../../assets/index.css"; class Index extends Component {constructor(props) {super(props)this.state = {columns: [{title: 'Name',dataIndex: 'name',width: 150,},{title: 'Age',dataIndex: 'age',width: 150,},{title: 'Address',dataIndex: 'address',},],data: []}}componentDidMount() {const data = [];for (let i = 0; i < 100; i++) {data.push({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,});}this.setState({data: data}, () => {this.fixedTop(3);})}fixedTop = (rowNumber) => { // rowNumber必須是 number類型let table = document.getElementById("table1"); //獲取 tabel domif (table) { //如果 table存在let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //獲取 table的 bodylet trs = tableBody.getElementsByTagName("tr"); //獲取 table body的 tr合集let top = 0; // top值for (var index = 0; index < rowNumber; index++) {if (index < rowNumber) {if (index == 0) {top = 0;} else {top = index * 54;}if (trs[index]) { //設置樣式trs[index].style.cssText = `position: sticky;z-index: 100000;background: red;top:${top}px;`}} else {return}}}}render() {const { data, columns } = this.state;return (<div><Table id="table1" columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }}/></div>);} }export default Index

這個 寫法 其實 也有缺陷 就是 tr的高度 不固定 那就 沒法實現了。所以 我又優化了一下，使用 js 動態獲取 tr的高度（clientHeight 屬性） 相加 即可。

fixedTop = (rowNumber) => { // rowNumber必須是 number類型let table = document.getElementById("table1"); //獲取 tabel domif (table) { //如果 table存在let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //獲取 table的 bodylet trs = tableBody.getElementsByTagName("tr"); //獲取 table body的 tr合集let top = 0; // top值for (var index = 0; index < rowNumber; index++) {if (index < rowNumber) {if (index == 0) {top = 0;} else {// clientHeight 的值 = 元素內容(這里是高度)+上下paddingtop +=trs[index].clientHeight; // 動態 獲取 tr的高度}if (trs[index]) { //設置樣式trs[index].style.cssText = `position: sticky;z-index: 100000;background: red;top:${top}px;`}} else {return}}}}

?

總結：

綜上所述一共三種方案：

最好的是 方式三，其次是方式二、最后是方式一

方式一： 缺點 不靈活，如果固定行數 少 可以使用? ?優點 簡單

方式二：缺點? 性能略微不好（實際上可以不計，理論上 確實更費性能） 優點? 靈活

方式三：缺點?基本沒什么缺點? 優點 靈活，性能好

所以我推薦 用第三種 。

我寫出來只是 給大家一個思路。

思考拓展

如果 你的表格有分頁，分頁之后 依然需要 固定前三行 。理論上這三種都可以實現 。最好的依然是方式三 。

只不過 方式三 需要 你在 分頁器 change事件 里 再調用這個方法 。

方式一、二則 不用 。

我的思路歷程是這樣的：

1.先實現 基礎的 功能 所以我想到 方式一 的寫法。

2. 實現了 基礎功能 我有考慮其它 因素，比如 行數 并不固定 于是 想出了 動態 設置 樣式，也就是方式二。

3. 既然行數 不固定，表格行 高度也可以不固定，所以 就想到 用js 獲取 高度 。 也就是方式三的 寫法。

我寫這個 只是給大家一個思路，一個功能就是這樣 不斷的完善出來的，要善于思考，考慮需求考慮全面 ，各個方面要 考慮到（ps:當然我這個 也并不一定 是最好的方法，也不一定就那么全面，我只是 給大家個思路）。

總結

以上是生活随笔為你收集整理的antd Table 实现 表格行固定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。