在 Ant Design 中使用带有 ProTable 的过滤器答案

【问题标题】：Using filter with ProTable in Ant Design在 Ant Design 中使用带有 ProTable 的过滤器
【发布时间】：2021-02-25 14:55:31
【问题描述】：

我在 Ant Design Pro 中使用 ProTable。表的数据源由 API 从服务器接收。如果用户不是管理员，我会通过他的userid 过滤数据源。问题是我无法获得两种情况（管理员和用户）的总页数。

这是我的 API 请求函数的代码：

function getRule(req, res, u) {
  let realUrl = u;

  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
    realUrl = req.url;
  }

  const { current = 1, pageSize = 5 } = req.query;
  const params = parse(realUrl, true).query;
  let dataSource = [...tableListDataSource].slice((current - 1) * pageSize, current * pageSize);
  const filter = JSON.parse(params.filter);

  if (filter) {
    if (Object.keys(filter).length > 0) {
      dataSource = tableListDataSource.filter((item) => {
        return Object.keys(filter).some((key) => {
          if (!filter[key]) {
            return true;
          }

          if (filter[key].includes(`${item[key]}`)) {
            return true;
          }

          return false;
        });
      });
    }
  }

  // TODO: Fix total count of pages for admin
  const total = () => {
    if (Object.keys(filter).length > 0) {
      return dataSource.length
    } else {
      return tableListDataSource.length
    }
  }

  const result = {
    data: dataSource,
    total: total,
    success: true,
    pageSize,
    current: parseInt(`${params.currentPage}`, 10) || 1,
  };
  return res.json(result);
}

但不是dataSource.length 用于用户，tableListDataSource.length 用于管理员我得到dataSource.length 这两种情况。我该如何解决？

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

total 应该是一个赋值，而不是一个函数：

const total = Object.keys(filter).length > 0 ? dataSource.length : tableListDataSource.length

【讨论】：