ElementUI el-table合并单元格

VUE项目中经常遇到table表格合并单元格的需求，el-table组件支持自定义单元格合并（:span-method=“objectSpanMethod”），即将某一属性值相同的单元格合并，只需绑定“span-method”属性，传入合并规则就行。

<!-- HTML -->
<el-table
	ref="myTable"
	:data="tableData"
	:span-method="objectSpanMethod"
	style="width: 100%">
</el-table>

//JS
data () {
    return {
		spanArr:[],
		pos: 0,
    };
},
mounted(){
	this.getSpanArr(this.tableData);//数据初始化
},
methods: {
    getSpanArr(data) {　
		for (var i = 0; i < data.length; i++) {
			if (i === 0) {
				this.spanArr.push(1);
				this.pos = 0
			} else {
				// 判断当前元素与上一个元素是否相同，例如“personId”属性
				if (data[i].personId == data[i - 1].personId) {
					this.spanArr[this.pos] += 1;
					this.spanArr.push(0);
				} else {
					this.spanArr.push(1);
					this.pos = i;
				}
			}//console.log(this.spanArr)
		}
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
		if (columnIndex === 2 || columnIndex === 1) {
			const _row = this.spanArr[rowIndex];
			const _col = _row > 0 ? 1 : 0;
			// console.log(`rowspan:${_row} colspan:${_col}`)
			return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
				rowspan: _row,
				colspan: _col
			}
		}
	}
},