【Vue】如何获得element-ui表格中的勾选项的index？
这个是一个vue单文件的template,使用了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;
},
贴出所有代码：
<template>
<div v-loading="loading"> <el-table
:data="list"
:row-class-name="tableRowClassName"
border
style="width: 100%">
<el-table-column
type="index"
label="121"
width="50">
</el-table-column>
<el-table-column
prop="module"
:formatter="formatter"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="module"
label="module"
width="180">
</el-table-column>
<el-table-column
prop="event"
label="行为"
width="180">
</el-table-column>
<el-table-column
prop="ip"
label="ip"
width="180">
</el-table-column>
<el-table-column
prop="ip"
label="操作"
width="180">
<template scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-pagination
@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">
</el-pagination>
</el-col>
</div>
</template>
<script type="text/ecmascript-6">
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();
}
}
</script>
<style>
.el-table .cell { word-break: normal;
}
</style>
我用一个非常土办法的办法可以实现，刚开始我想在单元格中添加自定义属性，发现elementUI中无法添加自定属性，然后就在单元格中添加一个隐藏的元素，把该元素的内容赋值为该行的index。所以获取index的问题转换成了获取该隐藏元素的内容，这个很好办，通过表格的cell-click事件获取单元格，然后利用DOM获取隐藏的元素！问题搞定！
以上是个很low的办法，其实官网实例有个很好的办法，参考如下代码
<template> <div id="app">
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template scope="scope"><p @click=handleRow(scope.$index)>{{ scope.row.date }}</p> </template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleRow(index) {
alert(index)
}
}
</script>
row-key="id" @selection-change="changed"changed(selection) { this.selection = selection
},
removeSelected() {
this.items = this.items.filter(t => !this.selection.some(s => s.id === t.id))
}
@面对疾风吧 的解决方法值得一鉴。很棒！
我也遇到了这问题,首先谢谢@Chobits 思路,我司需求是在几个输入框上填好资料后后点击添加按钮生成一行,按删除按钮删除选中的行 实现需求:在添加的时候给输入框值组成的对象添加一个id加入对象,再和selection-change事件获得的对象进行筛选,就是这行代码:this.items = this.items.filter(t => !this.selection.some(s => s.id === t.id))
题主有解决方案了吗？我现在也遇到这个问题
不懂不懂，求大神详细解答
tableRowClassName(row, index) { //把每一行的索引放进row
row.index = index
}
为什么我翻页后 index 又是从0开始的呢 而没有接到上一页
以上是 【Vue】如何获得element-ui表格中的勾选项的index？ 的全部内容， 来源链接： utcz.com/a/72876.html
