el-table表格上下合并

dom结构

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>

data定义

data() {
        return {
            spanArr: [] // 合并表格
            rowCols: ['DLLX_Text'], // 相同需要合并的字段
        }
    },

methods方法

methods: {
	// 获取数据 并且处理
	getData() {
		this.spanArr = mergeTableRow(
             this.opts.tableList,
             this.rowCols
         )
	}
	// 合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let index = this.rowCols.findIndex((v) => v === column.property)
            if (index !== -1 && column.property === this.rowCols[index]) {
                if (index === -1) {
                    index = 0
                }
                const _row = this.spanArr[index][rowIndex]
                const _col = _row ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        }
}

合并方法

// table 表格合并 通用方法
// list table数据
// arr  需要合并的数据列的 prop 数组
const mergeTableRow = (list, arr) => {
    let pos = 0
    const len = []
    const spanArr = []
    arr.forEach((col, cIndex) => {
        // 列  第几需要合并的个元素
        const rows = []
        list.forEach((row, rIndex) => {
            // 多少行数据 最大可合并行数
            if (!cIndex) {
                len.push(1)
            }
            if (!rIndex) {
                rows.push(1)
                pos = rIndex
            } else {
                // 是否与上一行 元素值相同
                if (list[rIndex][col] === list[rIndex - 1][col]) {
                    rows[pos] += 1
                    rows.push(0)
                    // 更新第一个元素相同值的个数
                    if (!cIndex) {
                        len[rIndex] = rows[pos]
                    }
                    // 超出最大个数 重新赋值
                    if (rows[pos] > len[rIndex]) {
                        rows[pos] -= 1
                        pos = rIndex
                        rows[pos] += 1
                    }
                } else {
                    rows.push(1)
                    pos = rIndex
                }
            }
        })
        spanArr.push(rows)
    })
    return spanArr
}