项目内遇到了一个需求,一个带复选框可选择的表格,接口获取到数据后默认选中全部数据,本来以为有那种属性设置一下就可以了,找了一会未果,得换个思路写了。
import React,{useState,useEffect} from 'react';
import {message,Table} from 'antd';
//使用hook函数式组件
const ZTest = (props) =>{
const [selectedRowKeys, setSelectedRowKeys] = useState([])
const [selectedRows, setSelectedRows] = useState([]);
const [dataSource,setDataSource] = useState([]);
useEffect(()=>{
initData();
},[])
//获取初始表格数据
const initData = () =>{
http.get(xxx).then(res => {
if (res.code === 200) {
let data = res.data;
setDataSource(data);
//举例数据格式
/*
[ { "id": 1, "name": "测试1"}, { "id": 2, "name": "测试2"}]
*/
//设置默认选中的值
setSelectedRowKeys(data.map(item => { return item.gjid }))
setSelectedRows(data)
}else{
message.warning(res.msg)
}
}).catch(err =>{
message.error(err.msg)
})
}
//复选框
const rowSelection = {
selectedRowKeys,
selectedRows,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys)
setSelectedRows(selectedRows)
},
//试了一下getCheckboxProps,会报出警告,不如直接设置SelectedRows和SelectedRowKeys
// getCheckboxProps(record) {
// return {
// defaultChecked: dataSource.map(item => { return item.gjid }) // 配置默认勾选的列
// }
// }
}
return (
<Table
bordered
size="small"
//此处绑定的id与获取初始数据的id为同一个
rowKey={(record, index) => record.id}
//columns不在文档内写了,就是普通的columns
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content', y: 580 }}
pagination={false}
rowSelection={rowSelection}
/>
)
}
以上是一个相对保守的解决方案,如果有更好的解决办法,欢迎探讨