html相关代码
即普通的ElementUI的表格插件传入span-method方法：
<el-table :data="tableData" border class="tableDataF" :span-method="objectSpanMethod"><el-table-column label="类名" align="center" prop="class"></el-table-column><el-table-column label="小类" align="center" prop="classify"></el-table-column><el-table-column label="名称" align="center" prop="name"></el-table-column><el-table-column label="编码" align="center"></el-table-column><el-table-column label="数量" align="center"></el-table-column><el-table-column label="合计" align="center"></el-table-column></el-table>
js相关代码
span-method方法绑定的objectSpanMethod函数中对数据进行处理：
export default {data() {return {tableData: [],};},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {//columnIndex 表示需要合并的列，多列时用 || 隔开if (columnIndex === 0 || columnIndex === 1) {const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,}}},filterData(arr, colIndex) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index == 0) {spanOneArr.push(1);} else {//class 和classify 分别表示表格数据第一列和第二列对应的参数字段，根据实际参数修改if (colIndex == 0) {if (item.class === arr[index - 1].class) {spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1); concatOne = index;}} else {if (item.classify === arr[index - 1].classify) {spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1); concatOne = index;} }}});return {one: spanOneArr,};}}}
