效果图:
注意:如果自己封装了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>