<template> <el-table border size="mini" height="100%" :span-method="cellMerge" :data="tableData" > <el-table-column label="设施" align="center" prop="a" /> <el-table-column label="参数" align="center" prop="b" /> <el-table-column label="数值" align="num" prop="c" /> </el-table></template><script>export default { data () { return { tableData: [ { a: '2222', b: '1', c: '2' }, { a: '111', b: '1', c: '2' }, { a: '111', b: '2', c: '3' }, { a: '111', b: '2', c: '3' }, { a: '111', b: '2', c: '3' }, { a: '2222', b: '1', c: '2' }, { a: '2222', b: '1', c: '2' }, { a: '111', b: '2222', c: '3333' }, { a: '111', b: '2222', c: '3333' } ], spanArr: [] } }, methods: { // groupBy 数组 groupBy (data, params) { const groups = {} data.forEach(v => { const group = JSON.stringify(v[params]) groups[group] = groups[group] || [] groups[group].push(v) }) return Object.values(groups) }, // 计算 数据合并 索引 getSpanArr (data, params) { // 接管重构数组 let arr = [] // 设置索引 let pos = 0 // 管制合并的数组 this.spanArr = [] // arr 解决 this.groupBy(data, params).map(v => (arr = arr.concat(v))) // this.tableData = arr arr.map(res => { data.shift() data.push(res) }) // spanArr 解决 const redata = arr.map(v => v[params]) redata.reduce((old, cur, i) => { if (i === 0) { this.spanArr.push(1) pos = 0 } else { if (cur === old) { this.spanArr[pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) pos = i } } return cur }, {}) }, // 合并 tableData 数据 cellMerge ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } } }, created () { this.getSpanArr(this.tableData, 'a') }}</script>