AntDesign Procomponents 高级表格如何重置筛选?

在这里插入图片描述

  • 首先我先说明一下,为什么要 重置筛选
  • 下面的表格我是用 datasource来渲染数据的 上面的搜索是用onSubmit来实现的
  • 问题来了!第一次我进页面请求接口,下面的表格和中间部分的金额也是会有数据的
  • 随后我筛选,根据这个筛选条件渲染数据也是没问题的
  • 然后我们这个筛选条件就放着,不重置, 再根据上面的(比如更新时间,进度)来查询
  • 这时候出问题了!下面的表格是同步更新的,但是这个金额 还是不变!
  • 因为直接显示接口返回过来的数据并不是我自己筛选之后的金额数据
  • 所以我得查询之后重置筛选

展现部分代码:

const SalesStatistics: React.FC = () => {

  const [filteredInfo, setFilteredInfo] = useState(null);

  const onProTableChange = (filters, filteredValue) => {
  // 在这里存了 FilteredInfo
    setFilteredInfo(filters); 
    if (filteredValue.action === 'paginate' || filteredValue.action === 'sort') return;
    const totalResult = filteredValue.currentDataSource.reduce(
      (result, item) => {
        result.totalHandlingCharge += item.totalHandlingCharge;
        result.totalPrice += item.totalPrice;
        result.totalMargin += item.totalMargin;
        return result;
      },
      { totalHandlingCharge: 0, totalPrice: 0, totalMargin: 0 },
    );
    setTotalFee(totalResult.totalHandlingCharge);
    setTotalSale(totalResult.totalPrice);
    setTotalMargin(totalResult.totalMargin);
  };
  
  return (
    <PageContainer>
      <ProTable<TableListItem>
        actionRef={ref}
        // 把filteredInfo 传过去
        columns={GetColumns({ data ,filteredInfo })}
        // 下面表格的数据
        dataSource={dataSource}
        // 头部搜索的
        onSubmit={getSearchList}
        // 这就是当我们筛选之后的自己计算金额的部分
        onChange={(pagination, filters, sorter, extra) => onProTableChange(filters, extra)}
        bordered
        options={{ setting: false }}
        rowKey={(record) => record.key}
        toolBarRender={() => [
          access?.canSeeFee && <div className="total-price">总手续费 (HK$){currencyFormat(totalFee)}</div>,
          access?.canSeeSale && <div className="total-price">总销售额 (HK$){currencyFormat(totalSale)}</div>,
          access?.canSeeMargin && <div className="total-price">总利润 (HK$){currencyFormat(totalMargin)}</div>,
        ]}
      />
    </PageContainer>
  )
};

export default SalesStatistics;

重点:如何重置筛选?

1.antdesing-react-table
2.
在这里插入图片描述

3.在这里插入图片描述

看这些API你会貌似懂


这是Columns的:就是把上面存的 filteredInfo拿过来用

  {
      title: '客户',
      dataIndex: 'client',
      align: 'center',
      key: 'client',
      filters: props.data.client.map((value) => {
        return { text: value, value };
      }),
      onFilter: true,
      // 这里设置 filteredValue属性
      filteredValue: filteredInfo.client || null,
    },

我还是建议看上述文档, 再结合我的代码,不要吐槽我, 我还是小白

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值