一.首先展示下做出的页面效果
1.以下页面是物资列表界面，将所有的物资分页展示出来。
2.将搜索内容分页展示出来，以下页面是含关键字“子”时展示的数据
3.当搜索框为空时展示全部数据
二.具体的实现
1.物资列表分页显示是使用了element-ui中el-table和el-pagination标签。代码如下：
div class="table_resource" style="text-align:center">
<el-table :data="showTable" border style="width: 100%">
<el-table-column type="index" prop="order" label="序号" width="150" align="center">
</el-table-column>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column prop="name" label="名称" width="120" align="center">
</el-table-column>
<el-table-column prop="unit" label="单位" width="120" align="center">
</el-table-column>
<el-table-column prop="quantity" label="数量" width="120" align="center">
</el-table-column>
<el-table-column prop="unitPrice" label=" 单价" width="120" align="center">
</el-table-column>
<el-table-column prop="totalPrice" label="总价(元)" width="120" align="center">
<div slot-scope="scope">
{{scope.row.totalPrice=scope.row.quantity*scope.row.unitPrice}}
</div>
</el-table-column>
<el-table-column prop="remarks" label="备注" width="338" align="center">
</el-table-column>
</el-table>
</div>
<div class="resource-page">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[3,5,15]" :page-size="pagesize" :pager-count="7"
layout=" prev, pager, next,sizes, jumper" :total="filterDataShow.length">
</el-pagination>
</div>2.el-table中data是需要在表格中展示的数据。将data属性设置为计算属性，可以根据计算属性的内容将表格分页展示出来。
3.current-change事件会在当前页面发生变化时触发，绑定的是handleCurrentChange方法。
4. pagesize属性绑定的是每页展示的物资个数
5.page-sizes是个number[]数组类型，里面的值代表每页可供选择的展示条目个数。表格的总页数是和此值有关系的。比如总共有15条数据，当page-sizes选择的值为5时，表格每页会展示5条数据，那15/5=3，表格的总页数就是3页，layout中的pager在页面中会出先3个页码按钮，分别为1，2，3。如下图所示
当把page-sizes选择的值为3时，表格每页会展示3条数据，那15/3=5，表格的总页数就是5页，layout中的pager在页面中会出现5个页码按钮，分别为1，2，3，4，5。如下图所示
即使page-sizes数组里已经定义了数据，但是pagesize必须在data中定义，并且赋值，否则会报错。pagesize的赋的值可以和page-sizes数组里的值没有关系，因为page-sizes数组中的第一个值会被默认为首选项，并且将pagesize的值覆盖掉。
5.page-count表示页码按钮的数量，它的值必须为5-21之间的奇数！
6.layout是组件布局，子组件名可以按照需求调换顺序，并用逗号分隔。
三.核心的JS代码
<script>
var vm = new Vue({
el: '#app',
data: {
keywords: '', // 搜索的关键字
filterDataShow: [], //储存符合条件的数据
tableData: [{
index: '1',
name: '圆珠笔',
unit: '支',
quantity: '45',
unitPrice: '2',
remarks: '物资充足'
},
{
index: '2',
name: '纸张',
unit: '页',
quantity: '52',
unitPrice: '4',
remarks: '物资充足'
},
{
index: '3',
name: '椅子',
unit: '把',
quantity: '34',
unitPrice: '6',
remarks: '物资充足'
},
...
], //分页前的数据
pagesize: 4,
currentPage: 1,
},
methods: {
searchResource() {
this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
let filterKeywords = this.keywords.trim();
let filerReasource = this.tableData.filter(item => { //过滤全部数据
if (item.name.includes(filterKeywords)) {
return item
}
})
this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
},
onSubmit() {},
handleSizeChange(psize) {
this.pagesize = psize;
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
}
},
mounted() {
this.searchResource(); //在页面挂载后调用此方法，确保数据与页面发生了交互
},
watch: { //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
keywords: {
handler() {
this.searchResource()
}
}
},
computed: {
//showTable计算属性通过slice方法计算表格当前应显示的数据
showTable() {
return this.filterDataShow.slice(
(this.currentPage - 1) * this.pagesize,
this.currentPage * this.pagesize
);
}
}
})
</script>
以上是我在写表格分页的心得及自己的一些看法，如有错误，欢迎指正。
感谢此博文给与的指导。
