antd表格操作实现勾选

可直接浏览官网 https://ant-design.antgroup.com/components/table-cn

 	interface IProps {onOk: (value: string[]) => void;value?: string[];onCancel: () => void;open: boolean;}const ExList = (props: IProps) => {const { onOk, value, onCancel, open } = props;const [chooseKeys, setChooseKeys] = useState<string[]>(value || []);const actionRef = useRef<ActionType>();const tableFormRef = useRef<ProFormInstance>();const rowSelection = {onChange: (selectedRowKeyList: Key[]) => {setChooseKeys(selectedRowKeyList as string[]);},selectedRowKeys: chooseKeys,preserveSelectedRowKeys: true,// preserveSelectedRowKeys: chooseKeys,};const columns: <any>[] = []return (<><ProTablerowKey="recommendCode"actionRef={actionRef}rowSelection={rowSelection}formRef={tableFormRef}columns={columns}pagination={{defaultPageSize: 100,}}scroll={{ y: 200 }}toolBarRender={false}search={{labelWidth: 'auto',layout: 'horizontal', // 设置为水平布局defaultCollapsed: false, // 默认展开所有查询条件collapseRender: false,}}// search={false}request={async (params: any) => {const {pageSize,userTagConditions,current: pageIndex,recommendCodeList,serviceKeyCodes,...others} = params;const formattedConditions: any =userTagConditions?.filter((item: any) => item && item.length > 0).map(([tagId, tagValue]) => ({tagId,tagValue: tagValue !== undefined ? tagValue : null, // 或者就不传})) || null;const queryParams: any = removeEmptyStrings({pageNum: pageIndex,pageSize,status: InsFatigueStatusEnum.ACTIVE,userTagConditions: formattedConditions,recommendCodeList: recommendCodeList? recommendCodeList.split(/[,，]/) // 使用正则表达式匹配英文逗号或中文逗号.map((item: string) => item.trim()): null,serviceKeyCodes: serviceKeyCodes ? [serviceKeyCodes] : undefined,...others,});const res = await getQueryRecommendConfigPageApi(queryParams);return {data: res?.list || [],total: res?.total || 0, // 默认值};}}/></>);};export default ExList;