在Antd中,如果要设置列的宽度并且固定在右侧,可以使用fixed属性,并将其值设置为right。同时,还需要将列的position属性设置为absolute

以下是一个示例代码:

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 300,
  },
  {
    title: 'Action',
    key: 'action',
    fixed: 'right',
    position: 'absolute',
    width: 100,
    render: () => <a>Delete</a>,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  // more data...
];

const App = () => (
  <Table
    columns={columns}
    dataSource={data}
    scroll={{ x: 'max-content' }}
  />
);

export default App;

在上述示例中,我们将Action列的fixed属性设置为right,并将position属性设置为absolute。同时,还为每列设置了宽度,scroll属性设置为{ x: 'max-content' },以实现滚动效果。

请确保按照上述方式设置列的宽度和位置,以确保其生效。如果仍然遇到问题,请检查是否有其他样式或配置可能影响到列的宽度

antd设置fixed right position: absolute在设置列宽列宽未生效

原文地址: http://www.cveoy.top/t/topic/h9Zu 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录