ElementUI的el-table表头的全选事件与自动清空事件

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/java_xxxx/article/details/80995386

最近用到elementUI的table的单选和全选事件，其中elementUI的表头的全选事件的选中与取消，做下笔记。
官方文档如下：

我们可以设置下面这个方法，然后，在方法中处理被选中的事件。
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
批量选者就不说了，大家可以看我其他的文章，有一章专门说批量的。
废话不多说，直接上代码
html:

<el-row class="yt-row">
<el-col  :span="24">
<el-table
height="460"
:data="submitList"
@select="selectionChange"
v-model="check2"
style="width: 100%"
:stripe="true"
ref="articleTable"
border="false"
@select-all="selectAll"
@clearSelection="clearSelect"
>
<el-table-column type="selection"  width="50"></el-table-column>
<el-table-column prop="" label="类型" width="60" align="center">
<template scope="scope">
<img src="../../images/article_normal.png" title="文章">
</template>
</el-table-column>

全选事件：当用户手动勾选全选 Checkbox 时触发的事件：@select-all
大致思路，当点击全选的时候，我定义了一个集合，专门存放选中事件的数据的id，我将选中的id放入这个集合里，如果该id在集合中不存在，就添加，如果存在就移除。因为每次点击（单击或者是全选）都会触发，只要点击checbox就会触发。例如，第二行未选中状态，这次你点击了第二行，那就将第二行id添加，当你再次点击第二行的时候，那就是取消了，于是若该集合中有id，就移除。
js代码：

// 全选
selectAll:function () {
if(app.selectedIds.length != app.pagination.total){
for(var i in app.submitList){
if(app.selectedIds.indexOf(app.submitList[i].id)==-1){
app.selectedIds.push(app.submitList[i].id);
}
}
}else{
app.selectedIds.splice(0,app.pagination.total);
}
}

这里的this.$refs.articleTable.clearSelection();方法articleTable为table引用的名字。即table里的ref=“articleTable”。这里的清空逻辑，就是我点击全选的时候，所有都为选中状态，然后我点击导出数据，将数据导出，导出后，它会自动将所有选中都清空。
js

toggleSelection:function(rows) {
// 这里的articleTable为表格引用的名字。
// 个人理解：如果这行代码直接写在回调函数里，那么这个this就是相当于回调函数来说的，就会报未定义的异常
this.$refs.articleTable.clearSelection();
var len = app.selectedIds.length;
app.selectedIds=splice(0,len); // 移除选中的数据
},

阅读更多