vue3+ts，el-table添加额外的多选框，并隐藏el-table原本自带的表头多选框_vue的表格多选框

效果图：

注意：如果自己封装了el-table，则无法使用 multipleTable.value.toggleAllSelection();来全选table列表。

<el-table
	ref="multipleTable"
    :data="data.paddingList"
    fit
    highlight-current-row
    style="width: 100%"
    height="65vh"
    @selection-change="handleTableSelectionChange"
>
	//这是默认的多选框，添加这个，table列表才能展示选择框
    <el-table-column type="selection" width="50"> </el-table-column>
    <el-table-column
         label="用户名"
         show-overflow-tooltip
         prop="userName"
         min-width="100px"
         align="center"
     >
     </el-table-column>
</el-table>
//额外的多选按钮
<el-checkbox
     style="padding-left: 20px"
     label="全选"
     :indeterminate="data.isIndeterminate"
     v-model="data.checkAll"
     @change="selAll()"
></el-checkbox>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
const data = reactive({
  fileName: "",
  paddingList: [], //数据列表
  isIndeterminate: false, //对el-checkbox控制不完整的选中状态
  checkAll: false, //控制el-checkbox全选状态
  multipleTableList: [], //选中的列表数据
});
// 根据ref方法获取multipleTable，与el-table中的ref对应
const multipleTable = ref();
/**
 * 点击全选按键，选定所有项
 */
const selAll = (): void => {
  console.log("multipleTable", multipleTable.value);
  multipleTable.value.toggleAllSelection();
};
/**
 * 表格内checkbox触发的全选按钮状态变化
 */
const handleTableSelectionChange = (val): void => {
  data.multipleTableList = val;
  // 0<选中的数据<总数据，展示不完整的选中状态
  if (val.length < data.paddingList.length && val.length > 0) {
    data.isIndeterminate = true;
  } 
  // 选中的数据==总数据，展示全选状态
  else if (val.length == data.paddingList.length) {
    data.isIndeterminate = false;
    data.checkAll = true;
  }
  //没有选中数据，则为空，都不展示
  else if (val.length == 0) {
    data.isIndeterminate = false;
    data.checkAll = false;
  }
};
</script>

<style scoped lang="scss">
// 隐藏 el-table 表头自带的多选框
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75