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-table
  ref="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();
};

效果：

单选

多选 

 

反选

 

全选