reactjs - 不带下拉菜单的 Ant 表自定义过滤器复选框

Question

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

Answer 1

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

(顺便说一句，我最初确实尝试通过 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