ElementUI Pagination 分页器绑定数据

最新推荐文章于 2024-02-24 11:22:46 发布

烂泥也能扶上墙

最新推荐文章于 2024-02-24 11:22:46 发布

阅读量2.8k

点赞数 6

文章标签： elementui

本文链接：https://blog.csdn.net/qsj0606/article/details/118356798

版权

1.el-table绑定数据

<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
   height="auto"
   border
   stripe
   style="width: 100%"
   >

添加 el-pagination分页

<div class="block">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalNum">
  </el-pagination>
</div>

data中添加相应参数

data(){
    return {
        tableData: [],  //数据
        currentPage: 1,//默认显示第一页
        pageSize:5,//默认每页显示5条
        totalNum: 100 //总页数
    }
}

添加跳页面和修改每页个数的动态函数

handleSizeChange(val) {
   console.log(`每页 ${val} 条`);
   this.pageSize = val;    //动态改变
},
handleCurrentChange(val) {
   console.log(`当前页: ${val}`);
   this.currentPage = val;    //动态改变
}

在页面加载时添加总数量

created(){
    this.totalNum=this.tableData.length;
}

设置表格翻页的序号递增


<el-table-column type="index" :index="indexMethod" align="center" label="序号" width="50"></el-table-column>

//方法写在methods里面
indexMethod (index) {
    let currentPage = this.paginationData.currentPage; // 当前页码
    let pageSize = this.paginationData.pageSize; // 每页条数
    return (index + 1) + (currentPage - 1) * pageSize; // 返回表格序号
},