前言
分页加表格很常见，基本实现：前台分页和后台分页。这里讲一下如何实现前台分页及搜索功能。基于vue和element和es6的知识，demo详见最后。
正文
页面布局
<template>
<div>
<el-row>
<el-col :span="6">
<el-input v-model="searchData" placeholder="输入姓名搜索">></el-input>
</el-col>
<el-col :span="2">
<el-button type="success" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table :data="list">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
:page-sizes="[1, 2,5, 10]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
绑定数据
data() {
return {
list: [],
data: [],
limit: 5,
total: null,
page: 1,
searchData: "",
}
},
获取数据，因为没有后台，就前台模拟取了数据
created() {
this.pageList()
},
注意： 首次展示数据时，将全部数据暂存保存在this中，方便之后操作，
pageList() {
// 发请求拿到数据并暂存全部数据
this.data = listJson.list
this.getList()
},
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
//过滤分页
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
//分页的总数据
this.total = list.length
},
当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
搜索过滤数据，如果搜索过后遇到this.page 变了，但是页面当前页码并没有变的问题，可以参考：解决方法
search() {
this.page = 1
this.getList()
}
demo
<template>
<div>
<el-row>
<el-col :span="6">
<el-input v-model="searchData" placeholder="输入姓名搜索"></el-input>
</el-col>
<el-col :span="2">
<el-button type="success" @click="search">搜索</el-button>
</el-col>
</el-row>
<el-table :data="list">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
var listJson = {
list: [
{ name: 'aa', age: 12 },
{ name: 'bb', age: 13 },
{ name: 'cc', age: 14 },
{ name: 'ad', age: 15 },
{ name: 'eaae', age: 16 },
{ name: 'faaf', age: 16 },
{ name: 'hah', age: 17 },
{ name: 'ii', age: 18 },
{ name: 'rar', age: 19 },
{ name: 'dd', age: 10 },
]
}
export default {
data() {
return {
list: [],
data: [],
limit: 5,
total: null,
page: 1,
searchData: "",
}
},
created() {
this.pageList()
},
methods: {
pageList() {
// 发请求拿到数据并暂存全部数据,方便之后操作
this.data = listJson.list
this.getList()
},
// 处理数据
getList() {
// es6过滤得到满足搜索条件的展示数据list
let list = this.data.filter((item, index) =>
item.name.includes(this.searchData)
)
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
// 搜索过滤数据
search() {
this.page = 1
this.getList()
}
},
}
</script>
