项目场景：

根据项目需求，要求在表格外加【全选】复选框，切换分页也需将每一行都勾选上

---

实现方式：

借用element-ui文档的这几个方法和属性

<el-checkboxv-model="checkAll"@change="handleCheckAllChange">全选</el-checkbox>
<el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"
:reserve-selection="true"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage1":page-size="100"layout="total, prev, pager, next":total="0"></el-pagination>

 

handleCheckAllChange(val){if (val == true) {this.$refs.multipleTable.clearSelection();this.$refs.multipleTable.toggleAllSelection();} else {this.$refs.multipleTable.clearSelection();}
}

若分页数据是由后端提供的则需要在获取表格数据时，判断【全选】复选框是否勾选

if (this.checkAll == true) {this.$refs.multipleTable.clearSelection();this.$refs.multipleTable.toggleAllSelection();} else {this.$refs.multipleTable.clearSelection();
}