效果:
1.勾选其中一个单号多选框,其他合并行自动也勾选。
2.取消其中一个合并行,其他单号相同合并行也取消勾选
重点:
ref="preTable"
@selection-change="handleSelectionChange"
@select="selectHandle"
@select-all="selectAllHandle"
this.$refs.preTable.toggleRowSelection(row, xxx);
this.$refs.preTable.clearSelection();
<template>
<el-table
:data="list"
@selection-change="handleSelectionChange"
@select="selectHandle"
@select-all="selectAllHandle"
ref="preTable"
>
<el-table-column type="selection" />
<el-table-column prop="rcptNo" label="单号" />
<el-table-column prop="itemName" label="项目名称" />
<el-table-column prop="itemClass" label="类别" />
<el-table-column prop="amount" label="收费数量" />
<el-table-column prop="ktAmount" label="可退数量" />
<el-table-column prop="refundAmount" label="申退数量" />
<el-table-column prop="refundCharges" label="退费金额" />
<el-table-column prop="charges" label="收费金额" />
<el-table-column prop="refundReason" label="退费原因" />
<el-table-column prop="refundedAmount" label="已退数量" />
</el-table>
</template>
<script>
export default {
data() {
return {
list: [],
// 选中数组
multipleSelection: [],
// 选中单号存放
radios: []
};
},
methods: {
// 获取选中项目
handleSelectionChange(val) {
this.multipleSelection = this.$refs.preTable.selection || [];
},
// 点击全选操作
selectAllHandle(selection) {
for (let i = 0; i < selection.length; i++) {
const ele = selection[i];
if (ele.ktAmount <= 0) {
this.toggleSelection();
return this.$message.warning(
"选择项目中存在可退数量为0,不可退费,请进行单击选择"
);
}
}
},
// 勾选表格某一行数据
selectHandle(selection, row) {
// 取消其中一个选中的时候 默认取消同单号的选中
if (!selection.includes(row)) {
this.radios.push(row.rcptNo);
this.pickUp(false);
} else {
if (row.ktAmount <= 0) {
this.toggleSelection();
return this.$message.warning("选择项目中存在可退数量为0,不可退费");
}
if (this.radios.includes(row.rcptNo)) {
this.radios.splice(this.radios.indexOf(row.rcptNo), 1);
} else {
this.radios.push(row.rcptNo);
}
this.pickUp(true);
}
},
// 需要默认勾选/取消的数据
pickUp(bool) {
let arr = [];
this.list.forEach(item => {
this.radios.forEach(val => {
if (val === item.rcptNo) {
arr.push(item);
}
});
});
this.toggleSelection(arr, bool);
},
// 默认选择/取消中的行
toggleSelection(rows, bool) {
if (rows) {
this.$nextTick(() => {
rows.forEach(row => {
this.$refs.preTable.toggleRowSelection(row, bool);
});
});
} else {
this.$refs.preTable.clearSelection();
}
}
}
};
</script>