antd table设置行高
时间: 2023-09-18 12:04:19 浏览: 498
在 antd 的 Table 组件中设置行高,可以通过两种方式实现。
第一种方式是通过设置 Table 组件的 `rowHeight` 属性来设置所有行的高度。例如:
```jsx
<Table
rowHeight={50}
dataSource={dataSource}
columns={columns}
/>
```
上述代码中,`rowHeight` 属性设置为 50,表示所有行的高度都是 50px。
第二种方式是通过自定义行渲染函数来设置每一行的高度。可以在 `columns` 配置中指定 `rowRender` 属性,该属性的值为一个自定义的行渲染函数。在这个函数中,可以通过设置行的样式来设置行的高度。例如:
```jsx
<Table
dataSource={dataSource}
columns={[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
...
{
title: '操作',
render: (_, record, index) => (
<div style={{ height: '50px' }}>
<Button onClick={() => handleDelete(index)}>删除</Button>
</div>
),
},
]}
/>
```
上述代码中,通过给 `<div>` 元素设置 `height` 样式来设置行的高度为 50px。
总结来说,设置 antd Table 的行高可以通过设置 `rowHeight` 属性来统一设置所有行的高度,也可以通过自定义行渲染函数来设置每一行的高度。
阅读全文