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

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

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

解决方法

您可以通过定义自定义的 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_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",{
          title: "Sum Amounts",dataIndex: "amount",width: 100
        }
      ]
    },{
      title: "CUSTOMER",key: "amount",{
      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",{
          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