Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选

原因分析

在我们使用 Ant Design Vue 表格筛选功能时会发现，如果只是按照例子来，只是前端的按页筛选，并不能都进行全局筛选，原因有两点：

1.我们筛选的时候，只是进行前端的数据过滤，并没有请求后台。

2.我们前端展示的数据，已经经过后台的分页了，每页展示固定的数据。

解决思路

所以，要想解决这个问题，我们的思路是：在我们选中筛选数据的时候，实际可以拿到我们要筛选的具体类型字段，然后根据这个字段，我们再次请求接口，由后端进行筛选，然后分页。这样我们就得到了全局的筛选。

注意：是通过接口根据我们的筛选条件重新查询，后端分页，然后展示到前端。

实例展示

这是一个官方的实例，但由于只有一页，所以看不出来问题。

这是我做的一个实例，首先是正常为筛选的状态。

当我进行选择筛选后，就会出现按页筛选的问题。

这里的每一页都有数据，但是就像我描述的一样，每一页都没有装满。

 

const columns = [{
  title: '类别',
  dataIndex: 'Name',
  key: 'Name',
  filters: [{
    text: '关联预测',
    value: '关联预测',
  }, {
    text: '方案生成',
    value: '方案生成',
  }, {
    text: '对比评估',
    value: '对比评估',
  }],
  filterMultiple: false,
    //这里我们必须先删除掉onFilter函数，因为前端就是使用这个进行静态筛选的
        //这里如果不删除，就算后台请求成功数据，也一样不会得到结果，与字段有关
  // onFilter: (value, record) => record.Name.indexOf(value) === 0,
},]

 其次我们根据官网文档可知，表格的change绑定事件，然后在事件理解可以获得我们选中的value数据，而且这里的filters是一个数组类型，所以如果是正式项目的话会要求我们请求后台获取数据，而不是写死。

 

const tableChange = (option, filters) => {
  //获取过滤的模型类别
  console.log(filters);
  // 翻页事件
  data.current = option.current
  //重新请求接口，刷新列表数据，此时我们可以将我们的筛选参数从refresh()方法中传参过去，
    //也可以定义全局变量进行复制，看个人需求，从而完成了后台的请求数据。
  refresh()
}

 最后，补充一下vue的一个知识点，如何进行数组中又是{}对象的赋值。

for (var i = 0; i < data.length; i++) {
    var tempObject = { text: '', value: '' }
    tempObject["text"] = data[i].name;
    tempObject["value"] = data[i].id;
    resule[i] = tempObject;
}
//这样我们就能得到如下的数据
[{
    text: 'test1',
    value: '1',
  }, {
    text: 'test2',
    value: '2',
  }, {
    text: 'test3',
    value: '3',
}]