1.基于iview.viewUI实现行合并（列之间没有所属对应关系，正常合并）

注：以下代码来自于GPT4o：国内直连GPT4o

只需要修改以下要合并的列字段，就可以方便使用啦

mergeFields: ['majorNo', 'devNam', 'overhaulAdvice', 'level']

<template><div style="margin-top:200px"><Table :columns="columns14" :data="data5" border :span-method="handleSpan"></Table></div>
</template><script>
export default {data() {return {columns14: [{title: '序号',key: 'index'},{title: '专业名称',key: 'majorNo'},{title: '设备名称',key: 'devNam'},{title: '检修建议',key: 'overhaulAdvice'},{title: '综合评价等级',key: 'level'}],resData: [{id: '1',devNam: 'CVS设备',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '风电',index: 1},{id: '2',devNam: 'CVS设备',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '风电',index: 2},{id: '3',devNam: '设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉、风电',index: 3},{id: '4',devNam: '设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉、风电',index: 4},{id: '5',devNam: 'CVS设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉',index: 5},],data5: [],mergeFields: ['majorNo', 'devNam', 'overhaulAdvice', 'level']};},methods: {// 合并单元格的处理方法handleSpan({ row, column, rowIndex, columnIndex }) {const mergeField = this.columns14[columnIndex].key;const mergeKey = `merge${mergeField.charAt(0).toUpperCase() + mergeField.slice(1)}`;if (this.mergeFields.includes(mergeField)) {return [row[mergeKey], row[mergeKey] ? 1 : 0];}},// 组装数据以便处理合并单元格assembleData(data) {const mergeData = {};this.mergeFields.forEach(field => {mergeData[field] = {};data.forEach(row => {const fieldValue = row[field];if (!mergeData[field][fieldValue]) {mergeData[field][fieldValue] = [];}mergeData[field][fieldValue].push(row);});});const mergeCounts = {};Object.keys(mergeData).forEach(field => {mergeCounts[field] = {};Object.keys(mergeData[field]).forEach(key => {mergeCounts[field][key] = mergeData[field][key].length;});});const fieldIndex = {};data.forEach(row => {this.mergeFields.forEach(field => {const mergeKey = `merge${field.charAt(0).toUpperCase() + field.slice(1)}`;if (!fieldIndex[field]) {fieldIndex[field] = {};}if (!fieldIndex[field][row[field]]) {fieldIndex[field][row[field]] = 0;}if (fieldIndex[field][row[field]] === 0) {row[mergeKey] = mergeCounts[field][row[field]];} else {row[mergeKey] = 0;}fieldIndex[field][row[field]]++;});});this.data5 = data;}},mounted() {// 模拟后台返回的数据this.assembleData(this.resData);}
};
</script>

2.基于iview.viewUI实现行合并（列之间有对应关系，只合并属于前一列值所属的内容）

<template><div style="margin-top:200px"><Table :columns="columns14" :data="data5" border :span-method="handleSpan"></Table></div>
</template><script>
export default {data() {return {columns14: [{title: '序号',key: 'index'},{title: '专业名称',key: 'majorNo'},{title: '设备名称',key: 'devNam'},{title: '检修建议',key: 'overhaulAdvice'},{title: '综合评价等级',key: 'level'}],resData: [{id: '1',devNam: 'CVS设备',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '风电',index: 1},{id: '2',devNam: 'CVS设备',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '风电',index: 2},{id: '3',devNam: '设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉、风电',index: 3},{id: '4',devNam: '设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉、风电',index: 4},{id: '5',devNam: 'CVS设备1',overhaulAdvice: "异常说明",level: '未见异常',majorNo: '锅炉',index: 5},],data5: [],};},methods: {// 合并单元格的处理方法handleSpan({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {return [row.mergeMajorNo, row.mergeMajorNo ? 1 : 0];}if (columnIndex === 2) {return [row.mergeDevNam, row.mergeDevNam ? 1 : 0];}if (columnIndex === 3) {return [row.mergeOverhaulAdvice, row.mergeOverhaulAdvice ? 1 : 0];}if (columnIndex === 4) {return [row.mergeLevel, row.mergeLevel ? 1 : 0];}},// 组装数据以便处理合并单元格assembleData(data) {let majorNos = [];let devNamesByMajorNo = {};let overhaulAdviceByDevName = {};let levelByDevName = {};// 获取所有唯一的专业名称，并初始化每个专业名称对应的设备名称列表data.forEach(e => {if (!majorNos.includes(e.majorNo)) {majorNos.push(e.majorNo);//q:这句代码的作用是什么？ a:获取所有唯一的专业名称devNamesByMajorNo[e.majorNo] = [];//q:这句代码的作用是什么？ a:初始化每个专业名称对应的设备名称列表}if (!devNamesByMajorNo[e.majorNo].includes(e.devNam)) {//q:这句代码的作用是什么？ a:获取每个专业名称对应的设备名称列表devNamesByMajorNo[e.majorNo].push(e.devNam);}if (!overhaulAdviceByDevName[e.devNam]) { //q:这句代码的作用是什么？ a:初始化每个设备名称对应的检修建议列表overhaulAdviceByDevName[e.devNam] = [];}if (!overhaulAdviceByDevName[e.devNam].includes(e.overhaulAdvice)) { //q:这句代码的作用是什么？ a:获取每个设备名称对应的检修建议列表overhaulAdviceByDevName[e.devNam].push(e.overhaulAdvice);}if (!levelByDevName[e.devNam]) {  //q:这句代码的作用是什么？ a:初始化每个设备名称对应的综合评价等级列表levelByDevName[e.devNam] = [];}if (!levelByDevName[e.devNam].includes(e.level)) {  //q:这句代码的作用是什么？ a:获取每个设备名称对应的综合评价等级列表levelByDevName[e.devNam].push(e.level);}});let majorNoNums = []; // 专业名称的合并单元格数let devNameNumsByMajorNo = {};  // 设备名称的合并单元格数 //q:为什么专业名称的合并单元格数是数组，这里是对象？ a:因为专业名称是唯一的，设备名称是不唯一的let overhaulAdviceNumsByDevName = {}; // 检修建议的合并单元格数let levelNumsByDevName = {};  // 综合评价等级的合并单元格数// 初始化每个专业名称和设备名称的合并单元格数majorNos.forEach(e => {majorNoNums.push({ majorNo: e, num: 0 });devNameNumsByMajorNo[e] = [];devNamesByMajorNo[e].forEach(devNam => {devNameNumsByMajorNo[e].push({ devNam: devNam, num: 0 });});});// 初始化每个设备名称下的检修建议和综合评价等级的合并单元格数for (let devNam in overhaulAdviceByDevName) {overhaulAdviceNumsByDevName[devNam] = [];overhaulAdviceByDevName[devNam].forEach(overhaulAdvice => {overhaulAdviceNumsByDevName[devNam].push({ overhaulAdvice: overhaulAdvice, num: 0 });});levelNumsByDevName[devNam] = [];levelByDevName[devNam].forEach(level => {levelNumsByDevName[devNam].push({ level: level, num: 0 });});}// 计算每个专业名称和设备名称需要合并的单元格数data.forEach(e => {majorNoNums.forEach(d => {if (e.majorNo === d.majorNo) {d.num++;}});devNameNumsByMajorNo[e.majorNo].forEach(n => {if (e.devNam === n.devNam) {n.num++;}});overhaulAdviceNumsByDevName[e.devNam].forEach(n => {if (e.overhaulAdvice === n.overhaulAdvice) {n.num++;}});levelNumsByDevName[e.devNam].forEach(n => {if (e.level === n.level) {n.num++;}});});// 更新数据中的合并单元格数data.forEach(e => {majorNoNums.forEach(d => {if (e.majorNo === d.majorNo) {if (majorNos.includes(e.majorNo)) {e.mergeMajorNo = d.num;majorNos.splice(majorNos.indexOf(d.majorNo), 1);} else {e.mergeMajorNo = 0;}}});devNameNumsByMajorNo[e.majorNo].forEach(n => {if (e.devNam === n.devNam) {if (devNamesByMajorNo[e.majorNo].includes(e.devNam)) {e.mergeDevNam = n.num;devNamesByMajorNo[e.majorNo].splice(devNamesByMajorNo[e.majorNo].indexOf(e.devNam), 1);} else {e.mergeDevNam = 0;}}});overhaulAdviceNumsByDevName[e.devNam].forEach(n => {if (e.overhaulAdvice === n.overhaulAdvice) {if (overhaulAdviceByDevName[e.devNam].includes(e.overhaulAdvice)) {e.mergeOverhaulAdvice = n.num;overhaulAdviceByDevName[e.devNam].splice(overhaulAdviceByDevName[e.devNam].indexOf(e.overhaulAdvice), 1);} else {e.mergeOverhaulAdvice = 0;}}});levelNumsByDevName[e.devNam].forEach(n => {if (e.level === n.level) {if (levelByDevName[e.devNam].includes(e.level)) {e.mergeLevel = n.num;levelByDevName[e.devNam].splice(levelByDevName[e.devNam].indexOf(e.level), 1);} else {e.mergeLevel = 0;}}});});// 将整理后的数据交给表格渲染this.data5 = data;}},mounted() {// 模拟后台返回的数据this.assembleData(this.resData);}
};
</script>