vue-element-UI中实现翻页改变索引index，修改页面显示item数量的方法

洋大槐

于 2019-04-04 17:35:01 发布

阅读量5.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：研究生后台管理系统

本文链接：https://blog.youkuaiyun.com/weixin_43905448/article/details/89030449

研究生后台管理系统专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Element UI的表格组件中实现动态分页及调整每页显示条数的功能。通过具体代码示例展示了如何使用`el-table-column`设置实时翻页的index显示，并通过`el-pagination`组件及其事件监听器实现每页显示数量的动态更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实时翻页改变index

<el-table-column type="index" 
:index="indexMethod" 
width="50" >
</el-table-column>

对应的方法：

    indexMethod(index) {
        return (this.pageNo-1)*this.pageSize+index+1;
      }

效果：
在这里插入图片描述

2.修改每页显示多少条item 的方法（实时更新）:

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

对应的方法：

handleSizeChange(val) {
    this.pageSize=val;
    this.getLoglist();
  console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
    this.pageNo=val;
    this.getLoglist();
  console.log(`当前页: ${val}`);
},
//获取日志列表
async getLoglist() {
  const result = await logSearchApi(this.pageNo, this.pageSize);
  this.logSearchData = result.data.list;
  this.total=result.data.total;
  // console.log(this.yearList);
},