前端分页以及数据查询

115 阅读1分钟

业务:

1.由于500强企业大部分旧项目采用了sap(ABAP)语言架构,sap语言的限制,不适合做后端分页

2.后端返回的数据量一般不会超过5000,所以前端分页和前端查询是基本符合要求

组件封装如下:

image.png

在定义的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

        },