支持react表格自由选择展示的字段，支持全选

1、组件代码如下 

import type { ModalProps } from "antd";
import type { CheckboxChangeEvent } from "antd/lib/checkbox";
import type { CheckboxValueType } from "antd/lib/checkbox/Group";
import type { FC, ReactNode } from "react";import { Alert, Checkbox, Modal } from "antd";
import { useEffect, useState } from "react";import style from "./style.module.less";/*** @description 自定义table column列选择* @param title {string|ReactNode} modal title* @param alert {string|ReactNode} alert message* @param options {Array<CheckboxOptionType|string>} 可选字段* @param value {Array<string>} 已选中的值* @param onOk {(checked) => void} 确认回调* @param className {string} class* @param open {boolean} 是否显示modal* @param props {ModalType} modal 属性值* @param defaultCheckAll {boolean} 是否含有全选* @return {ReactNode} Modal*/interface CustomColumnsProps extends ModalProps {alert?: string | ReactNode;options: any[];value: CheckboxValueType[];defaultCheckAll?: boolean;handleOk: (value: CheckboxValueType[]) => void;
}const CustomColumns: FC<CustomColumnsProps> = ({title = "自定义列表字段",alert,options = [],value = [],className,open,handleOk,...props
}) => {const [checked, setChecked] = useState<CheckboxValueType[]>(value);const [indeterminate, setIndeterminate] = useState(true);const [checkAll, setCheckAll] = useState(false);const onCheckAllChange = (e: CheckboxChangeEvent) => {const result = e.target?.checked;const selectValue = options?.map((item) => item.value);setIndeterminate(false);setCheckAll(result);setChecked(result? (selectValue as string[]): (options?.filter((item) => item?.disabled)?.map((item) => item.value) as string[]),);};const onChange = (e: CheckboxValueType[]) => {setChecked(e as string[]);if (props?.defaultCheckAll) {setIndeterminate(!!e?.length && e?.length < options?.length);}};useEffect(() => {if (!checked?.length) {setCheckAll(false);} else if (checked?.length === options?.length) {setCheckAll(true);}}, [checked]);useEffect(() => {if (open) {setChecked(value);}}, [open, value]);return (<Modalwidth={600}title={title}className={`${className} ${style.modal}`}maskClosable={false}open={open}{...props}onOk={() => {handleOk && handleOk(checked);}}><Alerttype="info"message={alert || `请选择您想显示的列表表头信息，最多可勾选${options.length}个字段，已勾选${checked.length}个字段`}/>{props?.defaultCheckAll && (<Checkboxindeterminate={indeterminate}onChange={onCheckAllChange}checked={checkAll}style={{ margin: "16px 0 8px 0" }}>选择所有的字段</Checkbox>)}<Checkbox.Group options={options} value={checked} onChange={onChange} /></Modal>);
};export default CustomColumns;

2、组件使用 

页面导入 import CustomColumns from "@/components/CustomColumns";
设置默认状态：

const preset = useStore("presetStore");
const [customColumnsVisible, setCustomColumnsVisible] = useState(false);const [columnsChecked, setColumnsChecked] = useState<CheckboxValueType[]>(preset?.customList?.order || ["orderNo","account","statusDesc","amount","paid","contractPrice","createdAt","station","chargingMode",],);

 3、定义tableColumns

4、在table组件中过滤出操作选项和默认项

5、组件调用

<CustomColumnsoptions={tableColumns.map(({ dataIndex, title, disabled }) => ({value: dataIndex,label: title,disabled,})).filter(({ value }) => value !== "action")}value={columnsChecked}defaultCheckAllopen={customColumnsVisible}handleOk={(value) => {setColumnsChecked(value);setCustomColumnsVisible(false);preset.updateCustomList("order", value);}}onCancel={() => setCustomColumnsVisible(false)}/>