VUE+element 分页组件简单使用、表格翻页的序号递增

<!--不用翻页的 直接加-->
<el-table-column
    type="index"
    align="center"
    label="序号"
    width="50px"
>
    <template slot-scope="scope">
        {{scope.$index+1}}
    </template>
</el-table-column>

<el-table>
    <el-table-column type='index' :index='indexMethod' ></el-table-column>
</el-table>

//表格序号
    indexMethod(index) {
      let curpage = this.currentPage; //单前页码，具体看组件取值
      let limitpage = this.pageSize; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },


// 当前页码改变之后，触发这个函数
    handleCurrentChange(pageIndex) {
      this.currentPage = pageIndex;
      this.getDataList(pageIndex);
    },


第二种：
例子：主要是获取到数据，使用forEach为每一项动态添加一个index属性

var newItem =res.data.data.list.forEach((item,index) =>{ //res.data.data.list 表格数据     forEach为每一项添加数据

 item.index = (index+1)+(this.currentPage-1)*this.pageParams.size ;  

 // this.currentPage当前页  this.pageParams.size 每页显示多少 :page-sizes="[10,20,30,50]" 分页大小 

 return item
}) ;
this.tableData = res.data.data.list;

只需要在获取数据函数里面动态添加属性就OK了。

<el-table-column prop="index" label="排名" align="center"></el-table-column>

Events

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

<!-- 分页 -->
    <div class="pages">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
        :current-page="1"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
      ></el-pagination>
    </div>

js:
data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 4, // 每页大小
      total: 1000 //总条数
    };
  },

 methods: {
    //? 长度改变----改变每页显示的条数的时候  自动触发
    handleSizeChange(val) {
      console.log("长度改变:" + val);
    },
    // 当前页码改变之后，触发这个函数
    handleCurrentChange(val) {
      console.log("当前改变：" + val);
    }
  },