Merge cells, if the ID column values are consistent
The principle of
- The getSpanArr(Data) method data is the data that we get in the background, usually an array;
- SpanArr is an empty array that holds the number of merges for each row;
- Pos is spanArr’s index.
If it is the first record (index 0), add 1 to the array and set the index position. If it is not the first record, it determines whether it is equal to the previous record. If it is equal, it adds element 0 to spanArr and adds the previous element +1 to indicate the number of merged rows +1, and repeats to obtain the number of merged rows. 0 means that the line is not displayed
<template> <div style="padding:20px"> <el-table :data="tableData6" :span-method="objectSpanMethod" border > <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" </el-table-column> <el-table-column prop="amount1" ></el-table-column> </el-table> </div> </template> <script> export default {data() {return {spanArr: [],// tableData6: [{id: "1", name: "Amount1: x.h.", "234"}, {id: "1", the name: "x.h." amount1: "165"}, {id: "2", the name: "x.h.", amount1: "324"}, {id: "2," name: "x.h." amount1: "621"}, {id: "2", the name: "x.h.", amount1: "539"}}; }, mounted: function() { this.getSpanArr(this.tableData6); }, methods: {getSpanArr(data) {for (var I = 0; i < data.length; i++) { if (i === 0) { this.spanArr.push(1); this.pos = 0; If (data[I].id === data[i-1].id) {this.spanarr [this.pos] += 1;} else {// Determine whether the current element is the same as the last element. this.spanArr.push(0); } else { this.spanArr.push(1); this.pos = i; } } console.log(this.spanArr); } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1:0; console.log(`rowspan:${_row} colspan:${_col}`); Return {// [0,0] indicates that the row is not displayed. [2,1] indicates the number of combined rows rowspan: _row, colspan: _col}; }}}}; </script>Copy the code