實(shí)現(xiàn)效果圖：
image
?json：
image
頁(yè)面源碼：?
<el-table :data="data" border height="600" :span-method="objectSpanMethod">
<el-table-column :label="head" v-for="(head, key) in header" :key="head">
<template slot-scope="scope">
{{data[scope.$index][key]}}
</template>
</el-table-column>
</el-table>
控制單元格合并需要span-method(官網(wǎng))
export default {
data() {
return {
data:[],
spanArr:[],
};
},
methods: {
getSpanArr(data) {
console.log(data)
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判斷當(dāng)前元素與上一個(gè)元素是否相同,因合并第一個(gè)所以[0]
if (data[i][0] === data[i - 1][0]) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
},
mounted() {
this.getSpanArr(this.data);
}
}
2018-12-26
發(fā)現(xiàn)一個(gè)bug，如果需要手動(dòng)再去生成表格刹帕，在時(shí)間中調(diào)用this.spanArr=[],把spanArr清空一下
