虽然很多时候后端会把分页,搜索,排序都做好,但是有些返回数据并不多的页面,或者其他原因不能后端分页的通常会前端处理,而前端分页一般会涉及:表格数据的搜索,表格分页,排序,有些需要加一列序号。实现效果如下:
目录
表格数据
表格分页
表格序号
前端排序
搜索
表格数据
这里以this.showData来存放表格的数据,
showData: [],
表格分页
我们需要引用一下el-pagination组件,因为就几个页面是前端分页,所以我是没有封装的
<div class="block">
<el-pagination
:total="showData.length"//因为是前端分页,所以,showData是获取的表格所有数据
:current-page="query.page"
:page-size="query.page_size"
:page-sizes="[5, 10, 20, 50, 100]"
layout=" total, sizes, prev, pager, next"
background
@current-change="handleCurrentChange"//页面跳转
@size-change="handleSizeChange"//选择pageSize
></el-pagination>
</div>
query: {
page: 1,
page_size: 10
},
分页有两个常用方法,跳转页面与改变页数,如下:
handleSizeChange(val) {
this.query.page = 1
this.query.page_size = val
},
handleCurrentChange(val) {
this.query.page = val
},
表格序号
给表格加序号,如下:
加序号需要和分页组件互动,这里先在表格里面添加“序号”列,因为是vue3 ,所以用template,加一个插槽,方法为getIndex(scope.$index),
<el-table
size="medium"
style="width: 100%"
empty-text="暂无数据"
:data="showData.slice((query.page - 1) * query.page_size, query.page * query.page_size)"
scrollbar-always-on
@sort-change="sort_change"//排序
>
<el-table-column label="序号" type="index" width="60">
<template #default="scope">
<span v-text="getIndex(scope.$index)"></span>
</template>
</el-table-column>
<el-table-column
label="操作"
width="280px">
<template #default="scope">
<span @click="seeSubjects(scope.row)">
<el-link type="primary" :underline="false" style="line-height: 18px">查看</el-link>
</span>
</template>
</el-table-column>
</el-table>
这里根据之前定义的当前的页数page和每页的大小page_size计算出序号。注意一定要传index。
//获取表格序号
getIndex(index) {
return (this.query.page - 1) * this.query.page_size + index + 1
},
至此表格的分页与排序🆗了。
前端排序
因为以及前端分页了,排序也可以前端去排了。
排序的方法是sort_change(),这个方法自带参数。
sort_change(column) {
// column是个形参,具体查看element-ui文档
if (this.search != '') {
this.showData = this.tableData
.filter((data) => {
return Object.keys(data).some((key) => {
if (this.SearchData.indexOf(key) > -1) {
return String(data[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1
}
})
})
.sort(this.sortFun(column.prop, column.order === 'ascending'))
} else {
// eslint-disable-next-line vue/no-mutating-props
this.showData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'))
}
this.query.page = 1
},
sortFun(attr, rev) {
//第一个参数传入info里的prop表示排的是哪一列,第二个参数是升还是降排序
if (rev == undefined) {
rev = 1
} else {
rev = rev ? 1 : -1
}
return function (a, b) {
a = a[attr]
b = b[attr]
if (a && b) {
console.log(a, b, 999)
if (a < b) {
return rev * -1
}
if (a > b) {
return rev * 1
}
}
return 0
}
},
前端排序的时候,如果不是全部分页,可以在每一列里加Custom,代表自定义排序方法
<el-table-column :sortable="custom" ></el-table-column>
搜索
<span style="margin-right: 8px; font-size: 16px">搜索</span>
<el-input v-model="search" style="width: 30%" size="large" placeholder="请输入搜索关键字"></el-input>
搜索的字段是search,它的方法是search_change()
search_change() {
this.showData = this.tableData.filter((data) => {
return Object.keys(data).some((key) => {
//2023.03.10修改,这里的一段代码并不需要,只在tableData2中检索就可以达到模糊查询
return String(data[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
})
},
这里面涉及一个字段,SearchData,这里是在获取数据表格时,复制数据表格数据的表格。
搜索里,如果需要实时搜索,那么可以加一个监听,当输入框的内容变化时,就去搜索。如图:
watch: {
search(newVal, oldVal) {
this.search_change()
}
},
以上时常见的前端表格相关的处理操作。