在 Ant Design 中使用过滤器和 ProTable

木星

在 Ant Design Pro 中使用ProTable表的数据源由 API 从服务器接收。如果用户不是管理员,我会通过他的 .dataSource 过滤数据源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了两种情况。我该如何解决?

木星

total应该是一个分配,而不是一个函数:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Ant Design List和Radio Group过滤项目

如何在ant-design react app中使用ant-design-pro组件?

使用 Ant Design UI 库禁用 <a> 标签

无法使用 Ant Design 禁用 Step(动态)

如何使用 Webpack 3 配置 Ant Design

如何将从 Ant design Reacjs 中选择的过滤器参数发送到 nodejs 后端?

Ant-Design和Ant-Design-Pro中PageHeader的区别

如何重新映射数组以在Ant Design Tree中使用

如何使用 TypeScript、Ant Design 和 Rollup 构建组件库

Ant 设计中缺少排序和过滤器图标

如何在Ant Design中使菜单项右对齐?

如何使用Ant Design PageHeader将项目居中对齐?

无法使用LESS(ant.design)更改主按钮颜色

如何使用Ant Design制作自适应网格?

Ant Design Input / React DND - 使用 react-dnd 时无法在 Ant Design Input 内移动文本指针

Ant.Design标签对齐

Ant Design表搜索定制

导入Ant Design组件无效

在 Typescript 中使用 Ant Design 的轮播下一个和上一个窗格方法?

如何在React(Ant Design v4)中使用DatePicker(moment.js)更改日期格式和时区?

在Ant-Design中使用表单设置RangePicker的默认值

如何在 V4 中使用 Ant-design/icons 中的图标

如何在@ ant-design / pro-layout中使用通知菜单?

如何在 ant-design 选择的 v-decorator 中使用条件 if else 语句

在 React 中使用 Ant Design 切换标签页中的按钮?

如何在Power Bi中使用默认过滤器和可用过滤器?

我想在使用react和ant.design(antd)中验证输入的密码

尝试使用Sass和next.config.js集成Ant Design无效

使用 ant-design-vue Notification 和消息部分中的链接