一、效果图
未选择状态：
未全选状态：
全选状态：
二、代码实现
data：
data(){return{//数据tableData:[],/*全选的问题 */multipleSelection: [],isIndeterminate: false,//表格外全选checkAll: false,}}
表格外全选功能的多选框：
<el-checkboxv-model="checkAll":indeterminate="isIndeterminate"@change="handleCheckAllChange"style="margin-right: 30px"><span class="qxText">全选本页(已选{{ this.multipleSelection.length }}个)</span></el-checkbox>
表格内的多选：
<el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%":cell-style="{ 'font-size': '12px' }":header-cell-style="{background: '#f9f9f9','font-size': '12px','line-height': '18px',color: '#767989',}"@selection-change="handleSelectionChange"><el-table-column type="selection" width="40"> </el-table-column></el-table>
表格外全选方法：
// 点击外部全选handleCheckAllChange(val) {this.checkAll = val;var rows = this.tableData;var value = val ? rows : [];console.log(this.$refs.multipleTable);if (val) {rows.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}console.log(this.multipleSelection);}
表格内点击：
// 表格内点击多选框handleSelectionChange(val) {console.log(val);let checkedCount = val.length;this.checkAll = checkedCount === this.tableData.length;this.isIndeterminate =checkedCount > 0 && checkedCount < this.tableData.length;this.multipleSelection = val;},
