没有下拉菜单的 Ant 表自定义过滤器复选框

Question

我正在为我的项目使用 ant 表，我想在单击标题行内的复选框时过滤记录，当我单击复选框时，所有零值行都应该被过滤，其他行应该保留，有什么办法可以吗做这个？ Demo

Answer 1

您可以通过定义自定义columns title 属性来实现所需的功能，该属性除了列的标题字符串之外还呈现受控的Checkbox 组件。当Checkbox 为真时，然后根据您想要的过滤条件过滤掉表data。

（顺便说一句，我最初确实尝试通过 onFilter 和 filterIcon 方法获得相同的功能，但这种方法被证明是不成功的。）

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Checkbox } from "antd";
import "./index.scss";

const DifferenceTable = (props) => {
  const [isChecked, setIsChecked] = useState(false);

  const data = [
    {
      date: "2020-06-17",
      units: 2353.0,
      amount: 8891206.27,
      date: 2323,
      units: 243234,
      amount: 234234,
      units_diff: 0,
      amount_diff: 0
    },
    {
      date: "2020-06-17",
      units: 2353.0,
      amount: 8891206.27,
      date: 2323,
      units: 243234,
      amount: 234234,
      units_diff: 1,
      amount_diff: 1
    }
  ];

  const processedData = isChecked
    ? data.filter((datum) => datum.units_diff || datum.amount_diff)
    : data;
  const columns = [
    {
      title: "Bank",
      children: [
        {
          title: "Trxn Date",
          dataIndex: "date",
          key: "date",
          width: 100
        },
        {
          title: "Sum Units",
          dataIndex: "units",
          key: "units",
          width: 100
        },
        {
          title: "Sum Amounts",
          dataIndex: "amount",
          key: "units",
          width: 100
        }
      ]
    },
    {
      title: "CUSTOMER",
      children: [
        {
          title: "Trxn Date",
          dataIndex: "date",
          key: "date",
          width: 100
        },
        {
          title: "Sum Units",
          dataIndex: "units",
          key: "units",
          width: 100
        },
        {
          title: "Sum Amounts",
          dataIndex: "amount",
          key: "amount",
          width: 100
        }
      ]
    },
    {
      title: () => (
        <div>
          <span>Difference&nbsp;&nbsp;</span>
          <Checkbox
            checked={isChecked}
            onChange={(e) => {
              setIsChecked(e.target.checked);
            }}
          />
        </div>
      ),
      dataIndex: "units_diff",
      key: "units_diff",
      children: [
        {
          title: "Units",
          dataIndex: "units_diff",
          key: "units_diff",
          width: 100
        },
        {
          title: "Amounts",
          dataIndex: "amount_diff",
          key: "amount_diff",
          width: 100
        }
      ],
      align: "center"
    }
  ];

  return (
    <Table
      // rowKey="uid"
      className="table diff_table"
      columns={columns}
      dataSource={processedData}
      pagination={false}
      scroll={{ y: 400, x: 0 }}
    />
  );
};

ReactDOM.render(<DifferenceTable />, document.getElementById("container"));

可通过以下CodeSandbox link获得功能演示