Antd中Table详解:

1.第一列显示序号:

const columns: TableProps<PackageListItem>["columns"] = [
		{
			title: "序号",
			dataIndex: "",
			key: "",
			align: "center",
			render: (text, record, index) => `${index + 1}`
		},
]

2.给table设置rowKey:

在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果 dataSource[i].key 没有提供，应该使用 rowKey 来指定 dataSource 的主键。

<Table<PackageListItem> rowKey="id" columns={columns} dataSource={tableList} />

3.table分页功能:

给table绑定pagination分页参数,常用的参数项有:

属性	说明	类型	默认值
current	当前页数	number	1
pageSize	每页条数	number	10
total	数据总数	number	-
showSizeChanger	是否显示 pageSize 切换器	boolean	false
pageSizeOptions	指定每页可以显示多少条	string[]	['10', '20', '30', '40']
showQuickJumper	是否可以快速跳转至某页	boolean	false
showTotal	用于显示数据总量和当前数据范围	function(total, range)	-
onChange	页码或 pageSize 改变时触发	function(page, pageSize)	-
onShowSizeChange	pageSize 变化时触发	function(current, size)	-

const [pageData, setPageData] = useState({
		current: 1,
		pageSize: 10
	});
const [total, setTotal] = useState(0);

//分页切换
const onPageChange = (page: number, pageSize: number) => {
	setPageData({ current: page, pageSize: pageSize });
};
//获取资产包列表数据
const getPackageList = async () => {
		...
		setTotal(res.data.total);
};
	
useEffect(() => {
		getPackageList();
}, [pageData]);

<Table<PackageListItem>
	...
	pagination={{
		total: total,
		current: pageData.current,
		pageSize: pageData.pageSize,
		showSizeChanger: true,
		showQuickJumper: true,
		showTotal: showTotal,
		pageSizeOptions: ["10", "20", "50", "100"],
		onChange: onPageChange
	}}
/>

4.自定义操作列:

const columns: TableProps<PackageListItem>["columns"] = [	
		{
			title: "操作",
			dataIndex: "",
			key: "",
			align: "center",
			render: data => (
               <Button type="link" onClick={() => viewBag(data)}>查看资产包</Button>
			)
		}
	];

5.table排序功能:

前端排序 : 只针对当前页码的列表数据进行排序,defaultSortOrder:指定默认排序规则(ascend升序或descend降序),sorter:指定排序函数，sorter: (a, b) => a.assetTotal - b.assetTotal。

后端排序 : 针对数据库中所有列表数据进行排序,sorter需要设置为true,并且需要给table绑定onChange事件,在事件中进行排序处理。

//前端排序
const columns: TableProps<PackageListItem>["columns"] = [
        ...
		{
			title: "债权总额",
			key: "assetTotal",
			dataIndex: "assetTotal",
			align: "center",
			defaultSortOrder: "descend",
			sorter: (a, b) => a.assetTotal - b.assetTotal
		},
]

//后端排序
const columns: TableProps<PackageListItem>["columns"] = [
        ...
		{
			title: "债权总额",
			key: "assetTotal",
			dataIndex: "assetTotal",
			align: "center",
			sorter: true
		},
]
<Table<PackageListItem>  onChange={onPageChange}/>
const [sortData, setSortData] = useState({ orderParam: "assetTotal", orderBy: "desc" });
const onPageChange = (pagination: PaginationProps, filters: any, sorter: any) => {
		...
		if (sorter.columnKey && sorter.order) {
			if (sorter.order === "ascend") {
				setSortData({ orderParam: sorter.columnKey, orderBy: "asc" });
			} else if (sorter.order === "descend") {
				setSortData({ orderParam: sorter.columnKey, orderBy: "desc" });
			} else {
				setSortData({ orderParam: sorter.columnKey, orderBy: "" });
			}
		}
	};

6.对column数据进行格式化:

如果columns中dataIndex指定了对应字段,render中data表示该字段对应的值,如果dataIndex未指定,data表示该行数据。

const columns: TableProps<PackageListItem>["columns"] = [
		...
		{
			title: "债权总额",
			key: "assetTotal",
			dataIndex: "assetTotal",
			render: data => {
				return data || data === 0 ? `￥${data}` : "-";
			}
		}
]

7.table多选功能:

import type { TableProps } from "antd";
type TableRowSelection<T extends object = object> = TableProps<T>["rowSelection"];

const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
		setSelectedRowKeys(newSelectedRowKeys);
	};
const rowSelection: TableRowSelection<BidItem> = { selectedRowKeys, onChange: onSelectChange };

<Table<BidItem>
	 ...
	 rowSelection={rowSelection}
></Table>