也是百度看的别人的代码,不过为了自己以后用起来方便,还是记录一下
<el-table-column prop="modularName" show-overflow-tooltip label="模块" align="center" ></el-table-column>
//列表详情 queryList(data) { this.list=[] this.loadingA = true; getList(data).then(res => { if (res.code == 0) { this.list = res.data; this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.list); // 处理数据 this.loadingA = false; } else { this.loadingA = false; } }); }, //合并单元格 arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 没办法循环判断具体是那一列 所以就只好写了多个if if (column.property === ‘modularName‘) return this.mergeAction(‘modularName‘, rowIndex, column); }, mergeAction(val, rowIndex, colData) { // 参数 val 为 "name" 或者"id" let _row = this.rowMergeArrs[val].rowArr[rowIndex]; let _col = _row > 0 ? 1 : 0; return [_row, _col]; }, rowMergeHandle(arr, data) { //arr: [‘name‘, ‘id‘] data为tableData if (!Array.isArray(arr) && !arr.length) return false; if (!Array.isArray(data) && !data.length) return false; let needMerge = {}; arr.forEach(i => { // i 为 "name" 或者 "id" needMerge[i] = { rowArr: [], rowMergeNum: 0 }; data.forEach((item, index) => { // item: { id: ‘122‘, name: ‘王小虎‘, amount1: ‘539‘, amount2: ‘4.1‘, amount3: 15 } /* item 为表格每一项的数据 ,index 为表格数据索引 */ // 表格首个数据单独处理 if (index === 0) { needMerge[i].rowArr.push(1); needMerge[i].rowMergeNum = 0; } else { // 如果后一项与前一项相等,只用改变 rowArr 数组,不用管 rowMergeNum 数值 if (item[i] === data[index - 1][i]) { // 后一项name与前一项name对比 needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1; //此处是 rowMergeNum 属性存在的意义,就是为了定位要改变的数值 needMerge[i].rowArr.push(0); // console.log("表格数据的转化步骤-"+ i +"的rowArr数组为:" +needMerge[i].rowArr," rowMergeNum的数值为:"+needMerge[i].rowMergeNum) } //如果后一项与前一项不相等,rowArr、rowMergeNum都改变 else { needMerge[i].rowArr.push(1); needMerge[i].rowMergeNum = index; // console.log("表格数据的转化步骤-"+ i +"的rowArr数组为:" +needMerge[i].rowArr," rowMergeNum的数值为:"+needMerge[i].rowMergeNum) } } }); }); return needMerge; },
注:modularName值要相对应;合并方法要在获取到表格的值以后调用