element 表格排序

在做项目中其实element ui表格时非常常用的，
今天我来介绍一下给表格添加序号，我说的不是饿了么自带的加一个index的这种
看截图，比如我点击到第二页希望我的序号是从11开始的

image.png

我用的是vue脚手架，
第一步：最开始的时候在data定义page
第二步： 在序号列上加上:index="typeIndex" ，typeIndex是一个方法
第三步： 在分页器上加上 :current-page="page" @current-change="table"
第四步：typeindex方法内容
第五步：在table方法里让this.page = val;其实val就是分页器上回调返回的页数，不知道的可以输出val看一下
注意在分页上第一次加载数据的时候我们一般加上table(1);

// 第一步
export default{
  data(){
    return {
     page : 1;    
     }
  }

}

//第二步   这里v-bind:index = "typeIndex"
  <el-table-column
            type="index"
            :index="typeIndex"
            label="序号"
            width="150"
            align="center">
          </el-table-column>

//第三步
 <div class="block" v-show="dataTotal>10">
          <el-pagination
            layout="total, prev, pager, next , jumper"
            :current-page="page"
            @current-change="table"
            :total="dataTotal">
          </el-pagination>
        </div>

  //第四步
    typeIndex(index) {
        return index + (this.page - 1) * 10 + 1;
      },

//第五步
  table(val){
     
       this.page = val;
     //  ....
     }