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

1.实时翻页改变index

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

对应的方法:

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

效果:
vue-element-UI中实现翻页改变索引index,修改页面显示item数量的方法_第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);
},

效果:
vue-element-UI中实现翻页改变索引index,修改页面显示item数量的方法_第2张图片

你可能感兴趣的:(研究生后台管理系统)