效果如下:
代码如下:
html:
<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
prop="name"
label="姓名"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
<el-table-column
prop="amount3"
label="数值 3(元)"
/>
<el-table-column
prop="amount1"
label="数值 1(元)"
/>
<el-table-column
prop="amount2"
label="数值 2(元)"
/>
</el-table>
js:
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
},
{
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
},
{
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: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 4) {
if (rowIndex % 8 === 0) {
return {
rowspan: 8,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex < 7) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (columnIndex < 11) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}