antd table 列宽放大缩小
时间: 2024-08-27 08:01:58 浏览: 118
antd-table-dragula:Ant Design Table + Dragula - 行拖放
antd的Table组件提供了一种列宽调整的功能,这主要是通过`proColumns`属性来配置每个列的宽度。当你设置`proColumns`时,可以包含一个`width`键值对来指定列初始的宽度,然后使用`onCell`回调,在渲染单元格时监听用户的列宽调整事件。
例如:
```jsx
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
width: 150, // 初始列宽
onCell: ({ record }) => ({
// 当用户点击列头并拖动时触发此函数
onPopoverResize: (e) => {
console.log('Column resized to:', e.newWidth);
},
}),
},
];
const data = ...; // 数据源
<Table columns={columns} dataSource={data} />
```
用户可以通过点击列标题然后拖动边框来调整列宽。`onPopoverResize`会在每次调整后触发,你可以在此处理列宽的变化操作。
阅读全文