antd表格默认选择第一条数据
时间: 2023-09-21 15:06:20 浏览: 119
react-antd table树形数据默认展开行实现jsx文件
antd 表格默认不会选择第一条数据,但是可以通过编程来实现这个功能。以下是一种实现方式:
1. 在表格组件中添加 `rowSelection` 属性,设置 `defaultSelectedRowKeys` 为一个数组,该数组中存储第一条数据的 key 值。
```javascript
<Table
rowSelection={{
type: "checkbox",
defaultSelectedRowKeys: [dataSource[0].key]
}}
dataSource={dataSource}
columns={columns}
/>
```
2. 在表格组件的 `componentDidMount` 生命周期钩子函数中,手动触发表格的 `onSelect` 事件,将第一条数据选中。
```javascript
componentDidMount() {
const { rowSelection } = this.table.props;
const defaultSelectedRowKeys = rowSelection.defaultSelectedRowKeys;
this.table.props.rowSelection.onSelect(
defaultSelectedRowKeys[0],
dataSource[0],
dataSource
);
}
```
注意:上述代码中的 `dataSource` 和 `columns` 分别代表表格的数据源和列定义。如果需要自定义表格的样式,可以通过设置 `className` 属性来实现。
阅读全文