ant design pro 表格的搜索功能如何实现？

Question

问题描述

我在用本地的mock测试数据，看到官方示例中的表格搜索功能可以使用，但是自己做了相应的修改后就发现搜索功能失效了。因此想请教大牛们

问题出现的环境背景及自己尝试过哪些方法

以上便是官方的示例，点击查询按钮即可把匹配的数据显示到表格中

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      const values = {
        ...fieldsValue,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };

      this.setState({
        formValues: values,
      });
      dispatch({
        type: 'rule/fetch',
        payload: values,
      });
    });
  };

我在相应的model和service中能找到对应的请求方法，但是找不到查询处理的逻辑

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

ant-design-pro/mock/rule.js

function getRule(req, res, u) {
  let url = u;
  if (!url || Object.prototype.toString.call(url) !== '[object String]') {
    url = req.url; // eslint-disable-line
  }

  const params = parse(url, true).query;

  let dataSource = tableListDataSource;

  if (params.sorter) {
    const s = params.sorter.split('_');
    dataSource = dataSource.sort((prev, next) => {
      if (s[1] === 'descend') {
        return next[s[0]] - prev[s[0]];
      }
      return prev[s[0]] - next[s[0]];
    });
  }

  if (params.status) {
    const status = params.status.split(',');
    let filterDataSource = [];
    status.forEach(s => {
      filterDataSource = filterDataSource.concat(
        dataSource.filter(data => parseInt(data.status, 10) === parseInt(s[0], 10))
      );
    });
    dataSource = filterDataSource;
  }

  if (params.name) {
    dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1);
  }

  let pageSize = 10;
  if (params.pageSize) {
    pageSize = params.pageSize * 1;
  }

  const result = {
    list: dataSource,
    pagination: {
      total: dataSource.length,
      pageSize,
      current: parseInt(params.currentPage, 10) || 1,
    },
  };

  return res.json(result);
}

Answer 2

无论是表单的查询还是筛选都是同一个意思，都是在dataSource中过滤掉不符合条件的数据