效果展示:
<el-table style="height: 500px;" :data="tableData" border empty-text="暂无数据" v-loading="loading"
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" show-overflow-tooltip
ref="multipleTable" @select="handleSelection" @select-all="handleCount">
<el-table-column type="selection" width="40" fixed="left" />
</el-table>
// 多选
const checkId = ref([]);
const multipleTable = ref()
// 手动勾选单选的情况
const handleSelection = (val) => {
if (checkId.value.length > val.length) {
// 取消选中
let checkAll = checkId.value;
checkId.value = val;
checkAll.forEach((item) => {
let v = val.find(i => i.qdfphm === item.gl_qdfphm); //关联的条件
if (v === undefined && item.gl_qdfphm != '') {
multipleTable.value.toggleRowSelection(item, false);
checkId.value = val.filter(v => item.id != v.id)
}
})
} else {
// 选中
checkId.value = val;
let v = val[val.length - 1];
if (v.gl_qdfphm != '') {
let vv = tableData.value.find(item => item.qdfphm == v.gl_qdfphm) //关联的条件
multipleTable.value.toggleRowSelection(vv, true);
checkId.value.push(vv);
}
}
if (chooseTab.value == 1) {
badgeTotal.value.total_supply = checkId.value.length
} else if (chooseTab.value == 2) {
badgeTotal.value.total_delete = checkId.value.length
}
}
// 手动勾选全选情况(计算总数)
const handleCount = (val) => {
checkId.value = val;
}
总结:重点在toggleRowSelection()方法