业务:
1.由于500强企业大部分旧项目采用了sap(ABAP)语言架构,sap语言的限制,不适合做后端分页
2.后端返回的数据量一般不会超过5000,所以前端分页和前端查询是基本符合要求
组件封装如下:
在定义的table数据 :data="filterTableContent(searchContent,tableData).slice((currentPage-1)pageSize,currentPagepageSize)"
filterTableContent函数:
filterTableContent(searchContent, tableData) {
//searchContent 为查询输入框的文字
//tableData为table的数据
if (searchContent) {
return tableData.filter(function (dataNews) {
//遍历table的每条数据,把单条对象数据转为数据,在再用some,只要有一条存在就返回true,
return Object.keys(dataNews).some(function (key) {
return String(dataNews[key]).toLowerCase().indexOf(searchContent.toLowerCase()) > -1;
});
});
}
return tableData;
}
注意table的序号问题
<el-table-column type="index" :index="indexMethod" width="50" label="序号" />
indexMethod(index) {
return (this.currentPage - 1) * 10 + index + 1
},