有些时候需要用到在取消勾选时获取当前行的数据,但是正常的用法你取消后返回给你的是一个空数组。
解决办法
这里我就直接把elementul上的多选表格代码直接复制过来演示了。如果想要看看效果,可以直接复制这一段代码找个空白的页面放进去看看log的信息就知道了。
老规矩,解释一下,防止新人看不懂:
这里主要是靠在el-table上用@select="handleSelect"方法实现的
下面handleSelect方法中,list参数代表所有勾选数据,item参数代表当前点击的数据。
arguments是一个类数组对象,如果不理解,具体说明自己百度看看这是个啥,这可是很好用的。
includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true,否则返回 false
逻辑
上面解释完了,应该也理解逻辑了吧
很简单,就是通过includes()判断所以勾选的数据内是否包含当前点击的项,如果没有就返回false。那你已经取消勾选了自然就不包含,就是false。那就if判断一下,如果是false也就是你取消勾选了就把当前的数据存到某个变量之类的,你就拿到了数据了。这个可以用item拿也可以直接arguments[1]也能拿到
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@select="handleSelect">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎3',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎4',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎5',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎6',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎7',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
//这个不用管
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
//重点是这个方法。list是所有勾选数据,item是当前点击的数据。
handleSelect(list, item){
if(list.includes(item)){
//勾选时做的事
console.log('成功');
}else{
//取消勾选时做的事,arguments[1]是当前取消勾选的项
console.log(arguments[1]);
}
console.log('handleSelect', arguments,list.includes(item))
},
}
}
</script>
<style>
</style>