html
分页核心代码:给 el-table 加
tableData.slice((currentPage – 1) * pagesize, currentPage * pagesize)
上述方法适用于数据量较少时,一次请求获取所有的数据,然后对全部的数据进行操作。
UI表格的表头加背景色,加给
<el-table :header-cell-style=”{background:’#ccc’,color:’#000′}”
<el-table
:data="
tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
"
style="width: 100%"
>
<el-table-column label="Date" prop="date"> </el-table-column>
<el-table-column label="Name" prop="name"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 表格分页 -->
<!-- pager-count pager-count属性可以设置最大页码按钮数,超出折叠,默认为7-->
<!-- 注意:若数据是后端接口返回的则此时:total="pageCount"-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:pager-count="7"
:current-page="currentPage"
:page-sizes="[1, 3, 5, 10]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length > 0 ? tableData.length : null"
background
style="float: right; margin-top: 20px"
>
</el-pagination>
script
data数据
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "222",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "333",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "4444",
address: "上海市普陀区金沙江路 1516 弄",
},
],
currentPage: 1, //默认初始页
pagesize: 10, //每页默认显示的数据
pageCount: 0, //数据的总条数,如果数据是后端接口返回的,则此值需修改
methods方法
methods: {
//表格编辑
handleEdit(index, row) {
console.log(index, row);
},
//表格删除
handleDelete(index, row) {
console.log(index, row);
},
//改变每页容纳的数据量
handleSizeChange: function (size) {
this.pagesize = size;
},
//切换页码
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
},
},
版权声明:本文为djh052900原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。