表格合并
Template
<template>
<div id="app">
<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>
</div>
</div>
</template>
<script>
export default {
name: "App",
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: "王2虎",
amount1: "324",
amount2: "1.9",
amount3: 9,
},
{
id: "12987125",
name: "王2虎",
amount1: "621",
amount2: "2.2",
amount3: 17,
},
{
id: "12987126",
name: "王小虎",
amount1: "539",
amount2: "4.1",
amount3: 15,
},
],
spanArr: [],
pos: null,
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// columnIndex === 0 找到第一列,实现合并随机出现的行数
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
// columnIndex === 1 找到第二列,实现合并第2到4列
}
},
getSpanArr(data) {
console.log(data); //从后台获取的数据
this.spanArr = [];
for (var i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录(即索引是0的时候),向数组中加入1
this.spanArr.push(1);
this.pos = 0;
} else {
if (data[i].name === data[i - 1].name) {
// 如果useName相等就累加,并且push 0
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
// 不相等push 1
this.spanArr.push(1);
this.pos = i;
}
}
}
console.log(this.spanArr);
},
},
created() {
this.getSpanArr(this.tableData);
},
};
</script>
<style>
</style>