1.html实现表格

<el-tablemax-height="300":columns="columns":data="tableData":show-index="false":span-method="objectSpanMethod":header-cell-style="{ background: '#eef0f6' }"
/>

2.记录每个字段合并数的方法

/*** @description 获取表格某字段每一行合并数 有多少字段需要合并就调用几次* @param {Array} tableData 表格数据* @param {String} key 需要合并的字段* @return {Array} spanArr 存放每一行合并数 值为n表示n项合并，为0的项表示该项不显示*/
getSpanPosition(tableData, key) {let pos = 0const spanArr = []for (let index = 0; index < tableData.length; index++) {//遍历列表数据，给spanArr存入一个1if (index === 0) {spanArr.push(1)pos = 0} else {// 判断某字段第二个值和前一个值是否相同，相同就给spanArr前一位加1，spanArr再存入0// spanArr值为n表示n项合并，为0的项表示该项不显示const value1 = tableData[index][key] // 唯一标识const value2 = tableData[index - 1][key]// 当上一个和当前相等的时候，说明是同一个if (value1 === value2) {spanArr[pos] += 1spanArr.push(0)} else {spanArr.push(1)pos = index}}}return spanArr
}

3.合并单元格方法 

/*** @description 合并单元格方法* @param {Number} rowIndex 行序号* @param {Number} columnIndex 列序号* @param {Array} spanArr */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {//该形式为行合并 第1列 目的省份 合并方式 if (columnIndex === 0) {const provinceNameSpanArr = this.getSpanPosition(this.tableData, 'provinceName')const _row = provinceNameSpanArr[rowIndex]const _col = _row > 0 ? 1 : 0return { rowspan: _row, colspan: _col }}//该形式为行合并 第1列 费用类型 合并方式 if (columnIndex === 1) {const feeTypeSpanArr = this.getSpanPosition(this.tableData, 'feeType')const _row = feeTypeSpanArr[rowIndex]const _col = _row > 0 ? 1 : 0return { rowspan: _row, colspan: _col }}//该形式为列合并 第7行if (rowIndex === 6) {if (columnIndex === 2) {// 定位到6行3列 告诉单元格合并1行2列return [1, 2]}if(columnIndex === 3) {// 告诉该单元格不显示return [0,0]}}
}

4.最终效果图