Ant Design的Table组件

234 阅读1分钟

基本的cloumns、dataSource这里就不提了,看看官方文档就很明白

  1. rowSelection(object)用来配置表格是否可选择
const (selectedRowKeys, setSelectedRowKeys) = useState([])
const rowSelection = { 
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => { 
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        setSelectedRowKeys(selectedRowKeys)
    }
}
// 在rowSelection对象中 selectedRowKeys属性的值可以控制Table选择的行
// onChange则可以改变selectedRowKeys具体的值
<Table rowSelection={rowSelection} />
  1. pagination用来配置分页(用法如同Pagination组件 只是此处用对象
<Table pagination={{pageSize: 8}} />
// 顺带一提 在Pagination组件中有种写法是采用解构的形式 其实和文档的写法结果是相同的
const pageobj = { pageSize: 8 }
<Pagination {...pageobj} /> == <Pagination pageSize={8} />
// 在此处我的理解是 解构出来之后 得到的结果就是pageSize = 8在得出Pagination组件的pageSize的API的值为8
{...pageobj} = { pageSize: 8 } => pageSize = 8