antd设置fixed right position: absolute在设置列宽列宽未生效
在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' },以实现滚动效果。
请确保按照上述方式设置列的宽度和位置,以确保其生效。如果仍然遇到问题,请检查是否有其他样式或配置可能影响到列的宽度
原文地址: http://www.cveoy.top/t/topic/h9Zu 著作权归作者所有。请勿转载和采集!