【前端】如何优雅的解决el-table分页index问题

el-table在分页时候，运用scope.$index去处理行数据，往往会出现index分页从0重新计数的问题。通常有两种方法：
1、每次运用scope.$index时，根据page和pageSize对index进行转化

<el-table                          
     :data='tableData.slice((page-1)*pageSize,page*pageSize)'
     >
     <el-table-column label='line1' prop='line1' >
		<template slot-scope='scope'>
             <el-button type='text' @click='handleFuc(trueIndex(scope.$index))'>  
             </el-button>
        </template>
     </el-table-column>
</el-table>

private handleFunc(trueIndex: any) {
	console.log(trueIndex);
}

private trueIndex(index: any) {
   return index + (this.page - 1) * this.pageSize;
}

缺点是每次运用scope.$index都需要调用trueIndex获取实际的index

2、运用el-table的row-class-name属性，对row的index进行统一处理，将trueIndex放入row属性中，每次需要用到行的index时候，直接用scope.row.index

<el-table                          
     :data='tableData.slice((page-1)*pageSize,page*pageSize)'
     :row-class-name="tableRowClassName"
     >
     <el-table-column label='line1' prop='line1' >
		<template slot-scope='scope'>
             <el-button type='text' @click='handleFuc(scope.row.index))'>  
             </el-button>
        </template>
     </el-table-column>
</el-table>

// 通过这一条将row的index在分页情况下进行校正
private tableRowClassName(row: any) {
     row.row.index = row.rowIndex + (this.page - 1) * this.pageSize;
 }
 
private handleFunc(trueIndex: any) {
	console.log(trueIndex);
}