Bootstrap

antd Table默认全部选中

项目内遇到了一个需求,一个带复选框可选择的表格,接口获取到数据后默认选中全部数据,本来以为有那种属性设置一下就可以了,找了一会未果,得换个思路写了。

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}
      />
    )
}

以上是一个相对保守的解决方案,如果有更好的解决办法,欢迎探讨

;