vue3，element-plus 表格单选、多选、反选、全选

准备

定义数据

// 表格
const table = ref();
// 表格数据
import type { User } from "@/interface";
const tableData = ref<User[]>([]);
// 表格选集
const tableSelection = ref<User[]>([]);
// 表格选择行
const tableSelectedRow = ref<User>();

<template>：表格设置：隐藏表头全选框

<el-tableref="table":data="tableData":header-cell-class-name="handleHeaderCellClassName"@row-click="onTableRowClick"@selection-change="handleTableSelectionChange"><el-table-column type="selection" header-align="center" /><el-table-column prop="moniker" label="人员"><template #header><el-input v-model="search" :prefix-icon="Search"><template #prepend>人员</template></el-input></template></el-table-column>
</el-table>

<style scoped lang="scss">：

// 隐藏表头的全选框，el-table中需要设置 :header-cell-class-name="handleHeaderCellClassName"
::v-deep .hideCheckBox .cell {visibility: hidden;
}

<script>：

// 设置表格表头列的类名
const handleHeaderCellClassName = (row: any) => {// 隐藏表头的全选框，el-table中需要设置 :header-cell-class-name="handleHeaderCellClassName"// 通过设置类名hideCheckBox的样式实现，::v-deep .hideCheckBox .cell { visibility: hidden; }if (row.columnIndex === 0) {return "hideCheckBox";}
};

1、单选：

// 点击表格的行，实现单选
const onTableRowClick = (row: any, column: any) => {// 表格选集取消选中tableSelection.value.forEach((item) => {table.value.toggleRowSelection(item, false);});// 选中行table.value.toggleRowSelection(row, true);tableSelectedRow.value = row;
};

2、多选：

// 点击表格的行，实现单多选
const onTableRowClick = (row: any, column: any) => {// 如果点击的当前行在表格选集中，那么取消选中行，否则选中行if (tableSelection.value.includes(row)) {// 取消选中行table.value.toggleRowSelection(row, false);} else {// 选中行table.value.toggleRowSelection(row, true);}tableSelectedRow.value = row;
};

3、反选： 

// 反选
const onInverseSelectClick = () => {// 需选选集let needSelection: any = [];// 遍历表格数据tableData.value.forEach((data) => {// 已选行标识let rowSelected = false;// 遍历表格选集tableSelection.value.forEach((row) => {// 表格数据对象的 userName 值等于表格选集对象的 userName 值，说明该行已勾选，标识该行if (data.userName === row.userName) {rowSelected = true;// 退出当前表格选集循环return;}});// 将未选行对象加入需选选集if (!rowSelected) {needSelection.push(data);}});// 取消已选行tableSelection.value.forEach((row) => {table.value.toggleRowSelection(row, false);});// 勾选需选行，needSelection.forEach((row: any) => {table.value.toggleRowSelection(row, true);});
};

 4、全选：

// 全选
const onAllSelectClick = () => {// 全选table.value.toggleAllSelection();
};

效果：

单选

多选 

 

反选

 

全选