<el-table
border
ref="fileTable"
:data="fileUploadData"
class="table-reset"
size="small"
:row-class-name="tableRowClassName"
@selection-change="onFileSelection"
>
<el-table-column align='center' width="40" fixed="left" type="selection">
</el-table-column>
</el-table>
在
el-table 中 添加
:row-class-name="tableRowClassName" ，在表格初始化，或者有变化时，可以操作当前数据，如此就可以额外添加索引。添加
@selection-change="onFileSelection"，当前复选框有变化时，会触发此函数，并传入当前数据选中的行内容
// 为每行数据设置索引 rowIndex 就是当前所在行的索引
tableRowClassName (row) {
row.row.rowIndex = row.rowIndex
},
// 数据行变化时
onFileSelection (row) {
// row 是当前显示的数据中被选中的行数组，每一行中都有一个 rowIndex 值
//--------------------- 以下是在项目中的代码，仅作展示-------------
// 防抖函数
this.isTimerWorking = null
this.isTimerWorking = setTimeout(() => {
// 判断当前选中的是哪一行,遍历当前页数据
for (var i = (this.currentPage - 1) * this.pageSize, len = this.pageSize; i < len; i++) {
// 当前行有无被选中
let rowArr = row.filter(val => {
return this.fileUploadData[i].rowIndex === val.rowIndex
})
// 当前行所在的索引
let index = this.fileUploadData[i].rowIndex + (this.pageSize * (this.currentPage - 1))
// 判断当前索引有无在数据总索引中
let iVal = this.fileUploadDataColIndex.indexOf(index)
// 当前行被选中
if (rowArr.length > 0) {
if (iVal === -1) { // 索引未在总索引中，添加
this.fileUploadDataColIndex.push(index)
}
} else { // 当前行未选中
if (iVal >= 0) { // 索引在总索引中，删除
this.fileUploadDataColIndex.splice(iVal, 1)
}
}
}
}, 500)
},
