我在React js项目中使用了ant设计表。它具有带有滚动道具的列修复选项。我需要用标题修复前2行。是否可以在ant设计或其他框架中执行此操作。
例如在下面。滚动Edward King 0
和Edward King 1
时必须固定,其他滚动则在y轴上滚动
答案 0 :(得分:1)
作为一种解决方法,您可以将前两行添加到标题中,并像默认行一样设置这些子标题行的样式。
这是Codepen的working example。
示例代码:
const { Table } = antd;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name1',
children: [
{
title: 'Summary',
dataIndex: 'name',
key: 'name2',
},
],
sorter: (a, b) => a.name - b.name
},
{
title: 'Age',
children: [
{
dataIndex: 'age',
key: 'age',
},
],
sorter: (a, b) => a.age - b.age
},
{
title: 'Company',
children: [
{
dataIndex: 'companyAddress',
key: 'companyAddress',
},
],
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
children: [
{
dataIndex: 'age',
key: 'age',
},
],
},
];
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i,
name: 'John Brown',
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
ReactDOM.render(
<Table
columns={columns}
dataSource={data}
bordered
size="middle"
scroll={{ x: 'calc(700px + 50%)', y: 240 }}
/>,
mountNode,
);```
[1]: https://codepen.io/cesarnml/pen/ExVMooE