原因分析
在我们使用 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',
}]