ant EditableProTable 显示 列间隔竖线
时间: 2024-10-22 17:17:08 浏览: 12
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
在Ant Design Pro Table组件中,如果你想在EditableProTable显示列间隔竖线,你可以通过自定义单元格样式来实现。`EditableProTable`允许你为每一列添加自定义渲染函数,包括单元格样式。你可以设置`render`属性,并在其中添加CSS来控制单元格间的间隔。
例如,你可以这样操作:
```jsx
import { EditableProTable } from '@ant-design/pro-table';
const columns = [
{
title: '标题',
dataIndex: 'dataIndex',
render: ({ record }) => <div style={{ paddingLeft: '10px', paddingRight: '10px', borderRight: '1px solid #ccc' }}>{record}</div>,
},
// 其他列...
];
<EditableProTable
// ...其他配置
columns={columns}
/>
```
在这个例子中,每行数据右侧都会有一条竖直的间距线。请注意,你需要调整`borderRight`的颜色、宽度等样式以匹配你的需求。
阅读全文