javascript 如何在滚动Ant Design表时固定表行

snz8szmq 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(175)

我在我的React js项目中使用ant设计表。它有带滚动属性的列修复选项。我需要修复头2行。在ant设计或其他框架中是否可以这样做。例如，在下面。当滚动Edward King 0和Edward King 1时，必须修复其他在y轴滚动
Example table

JavaScript

来源：https://stackoverflow.com/questions/63055832/how-to-fix-table-rows-while-scrolling-ant-design-table

2条答案

按热度按时间

xbp102n01#

作为一种解决方法，您可以将前两行添加到标题中，并将这些子标题行设置为默认行的样式。
这是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

赞(0）回复(0）举报 2023-03-28

fjaof16o2#

您可以使用antd下拉列表中的ediatble header选项添加它

赞(0）回复(0）举报 2023-03-28