elementUI中el-table序号自动累加

el-table序号自动累加

• （1）普通序号（不累计，每页都是从1开始）
• 翻页时，序号永远都是从1开始。因为每一次翻页都是根据当前数据的index显示

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

• （2）自动累加序号（根据 页数、每页数量、及当前行的index进行计算）

// (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
// (pageNum - 1) * pageSize + scope.$index + 1 

<el-table-column label="序号"  type="index"  width="50" align="center">
  <template slot-scope="scope">
     {{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}
  </template>
</el-table-column>

• （3）附赠分页模块，复制即用

 <!-- 分页 -->
<div class="pagination" style="margin-top:20px;text-align:center;">
    <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total,prev, sizes, pager, next,jumper"
              :current-page.sync="pageParams.pageNum"
              :page-size="pageParams.pageSize"
              :page-sizes="[10,20,50,100]"
              :total="pageParams.total">
    </el-pagination>
</div>

//分页参数
pageParams: {
    pageNum: 1,
    pageSize: 10,
    total: 0
},

 /**分页 */
 handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
 },

handleCurrentChange(val) {
      this.pageParams.pageNum = val;
},