实现原理

监听手动勾选数据行的 Checkbox时触发的select事件,根据参数 rows 和 row 计算出勾选操作为选中还是取消选中。

  • rows —— 所有选中行组成的数组
  • row —— 勾选行的数据

核心代码

="select"
select(rows,) {
// true为选中, 0或false为取消选中
this.selected = rows.length && rows.indexOf(row) !== -1;
},

完整范例

Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中_数据

<template>
<div class="mainBox">
<el-table ref="multipleTable" :data="tableData" @select="select">
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
</el-table>
<p v-if="selected !== null">
当前操作为:{{ selected ? "选中行" : "取消选中" }}
</p>
</div>
</template>
<script>export default {
data() {
return {
selected: null,
tableData: [
{
name: "王小虎",
age: 10,
},
{
name: "张三",
age: 20,
},
{
name: "李四",
age: 30,
},
],
};
},
methods: {
select(rows,) {
// true为选中, 0或false为取消选中
this.selected = rows.length && rows.indexOf(row) !== -1;
},
},
};</script>
<style scoped>.mainBox {
margin: 30px;
}</style>