借用element-ui文档的这几个方法和属性
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:reserve-selection="true"
@selection-change="handleSelectionChange">
<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>
<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();
}