el-table实现多行合并、选择（解决合并导致的半选问题）、删除操作

背景

有个页面有这个需求，多行合并、编辑、删除、多选、header添加筛选条件

主要解决问题

表格多行合并
解决合并导致的单选、多选和状态为半选的问题
删除统一行数
header筛选

没法给图，直接给代码

代码

<template><div><el-tableref="multipleTableDevice":data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"@select="selectTab"><!-- @selection-change="handleSelectionChange" --><el-table-column prop="id" label="ID" width="180"> </el-table-column><el-table-columnprop="name"label="姓名":filters="[{ text: '王小虎1', value: '王小虎1' },{ text: '王小虎2', value: '王小虎2' },{ text: '王小虎3', value: '王小虎3' },]":filter-method="filterHandler"></el-table-column><el-table-column prop="amount1" label="数值 1（元）"> </el-table-column><el-table-column prop="amount2" label="数值 2（元）"> </el-table-column><el-table-column prop="amount3" label="数值 3（元）"> </el-table-column><el-table-column label="操作" width="130" align="center"><template><el-button type="text">编辑</el-button></template></el-table-column><el-table-column type="selection" width="55" key="selection" /></el-table></div>
</template><script>
export default {name: "HelloWorld",data() {return {tableData: [{id: "12987122",name: "王小虎1",amount1: "234",amount2: "3.2",amount3: 10,},{id: "12987122",name: "王小虎1",amount1: "165",amount2: "4.43",amount3: 12,},{id: "12987122",name: "王小虎1",amount1: "165",amount2: "4.43",amount3: 12,},{id: "12987122",name: "王小虎1",amount1: "165",amount2: "4.43",amount3: 12,},{id: "12987124",name: "王小虎2",amount1: "324",amount2: "1.9",amount3: 9,},{id: "12987124",name: "王小虎2",amount1: "621",amount2: "2.2",amount3: 17,},{id: "12987125",name: "王小虎3",amount1: "539",amount2: "4.1",amount3: 15,},],};},created() {},methods: {filterHandler(value, row) {return row.name === value;},objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 仅对第一列（类别列）进行合并if (columnIndex === 0 ||columnIndex === 1 ||columnIndex === 2 ||columnIndex === 5 ||columnIndex === 6) {// 查找当前行与上一行是否属于同一类别const prevRow = this.tableData[rowIndex - 1];if (prevRow && prevRow.name === row.name) {// 如果属于同一类别，则当前行设置为不显示（即合并到上一行）return { rowspan: 0, colspan: 0 };} else {// 如果不属于同一类别，计算当前类别连续出现的行数作为rowspan的值let count = 1;for (let i = rowIndex + 1; i < this.tableData.length; i++) {if (this.tableData[i].name !== row.name) {break;}count++;}return { rowspan: count, colspan: 1 };}}},unique(arr, val) {const res = new Map();return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1));},selectTab(val, row) {// 当前是选中还是取消 true 选中 false 取消let isSelect = val.length && val.indexOf(row) > -1;// 当前显示的复选框let arr = this.unique(val, "name");// 取当前所有选中的框的iD的全集 (过滤未被选中的)let arrId = [];for (var i = 0; i < arr.length; i++) {if (isSelect || (!isSelect && arr[i].id !== row.id)) {arrId.push(arr[i].id);}}// 根据选中的id筛选数组let rowArrById = this.tableData.filter((item) => {return arrId.indexOf(item.id) > -1;});this.$nextTick(() => {this.tableData.forEach((item) => {this.$refs.multipleTableDevice.toggleRowSelection(item, false);});// 根据条件把指定行选中rowArrById.forEach((item) => {this.$refs.multipleTableDevice.toggleRowSelection(item, true);});});},},
};
</script><style scoped>
/* 样式调整，根据需要添加 */
</style>

删除功能没做，逻辑是通过id删除相同id的数据即可

如有帮助请点个赞，谢谢