element的表格index自定义_如何获得element-ui表格中的勾选项的index？

我遇到了类似的问题，就是在表格翻页的时候让索引也跟着累加起来，我查遍了element-ui得我文档也没有这个说明，只是有一个type="index"，但是这个是不会累加的。因为我可以获取当前是第几页(pageNumber)和当前页的条数(pageSize)，所以只需要在获取到当前行的index就可以实现索引累加了。最后发现两种解决方案：

一、让后台给你传数据的时候顺便把每一行的index传过来。

二、文档中有一个tableRowClassName方法，可以获取到当前行的index，

tableRowClassName(row, index) {

//把每一行的索引放进row

row.index = index

}

这个时候利用formatter就可以实现索引累加啦

formatter(row, column ,cellValue) {

//放回索引值

return this.pageSize * (this.page - 1) + 1+ row.index;

},

贴出所有代码：

:data="list"

:row-class-name="tableRowClassName"

border

style="width: 100%">

type="index"

label="121"

width="50">

prop="module"

:formatter="formatter"

label="序号"

width="50">

prop="module"

label="module"

width="180">

prop="event"

label="行为"

width="180">

prop="ip"

label="ip"

width="180">

prop="ip"

label="操作"

width="180">

查看

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page.sync="currentPage"

:page-sizes="[10, 20, 50, 100]"

:page-size="pageSize"

layout="sizes, prev, pager, next"

:total="total">

export default {

data() {

return {

list:[],

currentPage:1,

total:0,

page:1,

pageSize:10,

loading:false

}

},

beforeCreate(){//加载页面之后执行

},

methods: {

tableRowClassName(row, index) {

//把每一行的索引放进row

row.index = index

},

formatter(row, column ,cellValue) {

//放回索引值

return this.pageSize * (this.page - 1) + 1+ row.index;

},

handleSizeChange(val) {

console.log(`每页 ${val} 条`);

this.pageSize = val;

this.getList();

},

handleClick(val){

console.log(val.ip)

},

handleCurrentChange(val) {

console.log(`当前页: ${val}`);

this.page = val;

this.getList();

},

getList(){

var that = this;

that.loading = true;

this.$axios({

method:'post',

url:'http://192.168.1.51:8180/organization/test/toPay',

params: {

limit:that.pageSize,

offset:that.page

}

})

.then(function(response) {

that.loading = false;

console.log(response,"Fdsafdsa");

that.list = response.data.rows

that.total = response.data.total

})

.catch(function (response) {

that.loading = false;

console.log(response);

});

}

},

mounted() {

this.getList();

}

}

.el-table .cell {

word-break: normal;

}