官網實例如下:
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%">
<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"
sortable
label="數值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="數值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="數值 3">
</el-table-column>
</el-table>
<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>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
實際上重點在於每一行需要合併列的位置以及往下合併的行數.需要把這個信息放入行內
<template>
<div>
<el-table
:data="newTableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<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>
</div>
</template>
<script>
export default {
data() {
return {
gruopRow:[],
newTableData : [],
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987122',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987123',
name: '李小蛇',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987123',
name: '李小蛇',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987124',
name: '張小鳥',
amount1: '539',
amount2: '4.1',
amount3: 15
},{
id: '12987124',
name: '張小鳥',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987124',
name: '張小鳥',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987125',
name: '錢小猴',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '錢小猴',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987125',
name: '錢小猴',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
mounted: function () {
this.dataHandler();
},
methods: {
dataHandler(){
//重複計算
for (let i in this.tableData) {
//初始化需要合併的行數和列數量
this.$set(this.tableData[i], "row", 0);
this.$set(this.tableData[i], "column", 0);
//過濾重複數據以及計算重複數量(得出需要往下合併行數)
let r = this.contains(this.gruopRow, this.tableData[i])
//如果重複數據則不修改合併數,保持爲0,如果不重複爲該類型第一行則加入數組
if (!r) {
this.gruopRow.push({'name': this.tableData[i].name, "num": 1})
this.tableData[i].row = 1;
this.tableData[i].column = 1;
}
}
//合併計算
for (let i in this.tableData) {
for (let j = 0; j < this.gruopRow.length; j++) {
//如果該行爲本類型第一行,則賦值
if (this.gruopRow[j].name == this.tableData[i].name) {
let num = this.gruopRow[j].num
this.tableData[i].row = num;
this.tableData[i].column = 1;
this.gruopRow.splice(j, 1);
}
}
}
this.newTableData = this.tableData
},
contains(arr, obj) {
let i = arr.length;
while (i--) {
if (arr[i].name === obj.name) {
arr[i].num = arr[i].num + 1;
return true;
}
}
return false;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//判斷是否爲第一列
if (columnIndex === 0) {
return {
rowspan: row.row,
colspan: row.column
}
}
}
}
};
</script>