react--自定义列表字段-Toy模板网

这篇具有很好参考价值的文章主要介绍了react--自定义列表字段。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

支持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 (
    <Modal
      width={600}
      title={title}
      className={`${className} ${style.modal}`}
      maskClosable={false}
      open={open}
      {...props}
      onOk={() => {
        handleOk && handleOk(checked);
      }}
    >
      <Alert
        type="info"
        message={
          alert || `请选择您想显示的列表表头信息，最多可勾选${options.length}个字段，已勾选${checked.length}个字段`
        }
      />
      {props?.defaultCheckAll && (
        <Checkbox
          indeterminate={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";
设置默认状态：文章来源地址https://www.toymoban.com/news/detail-773644.html


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、组件调用

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

到了这里，关于react--自定义列表字段的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！