需求：
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 Indexcss代码：
.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 dom
if (table) { //如果 table存在
let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //获取 table的 body
let 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 dom
if (table) { //如果 table存在
let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //获取 table的 body
let trs = tableBody.getElementsByTagName("tr"); //获取 table body的 tr合集
let top = 0; // top值
if (index < 3) {
if (index == 0) {
top = 0;
} else {
// clientHeight 的值 = 元素内容(这里是高度)+上下padding
top +=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 dom
if (table) { //如果 table存在
let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //获取 table的 body
let 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 dom
if (table) { //如果 table存在
let tableBody = table.getElementsByClassName("ant-table-tbody")[0]; //获取 table的 body
let 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 的值 = 元素内容(这里是高度)+上下padding
top +=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:当然我这个 也并不一定 是最好的方法，也不一定就那么全面，我只是 给大家个思路）。
