先上效果图:
再上代码:
<template>
<div>
<el-table
:data="tableData6"
: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 {
tableData6: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987122',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
},
{
id: '12987122',
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
}
],
column_row_offset: {
id: [3, 1, 1],
name: [2, 1, 1, 1],
amount1: [1, 1, 1, 1, 1],
amount2: [1, 1, 1, 1, 1],
amount3: [1, 1, 1, 1, 1]
},
now_col_row_num: {},
now_col_offset: {},
};
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (!this.now_col_row_num[column.property]) {
this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property]);
let a = this.now_col_row_num[column.property].shift();
this.now_col_offset[column.property] = a;
return {
rowspan: a,
colspan: 1
};
} else if (rowIndex >= this.now_col_offset[column.property]) {
let a = this.now_col_row_num[column.property].shift();
this.now_col_offset[column.property] += a;
return {
rowspan: a,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
};
</script>
最后说思路:
主要是根据data中的column_row_offset表示哪几行要合并。