The example of row merging in element-ui's official website is merging based on the row number, which obviously does not meet our daily development needs, because usually the data in our table is dynamically generated, so some modifications need to be made. Let's first interpret the meaning of each parameter in the official website instance:
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
//用于设置要合并的列
if (rowIndex % 2 === 0) {
//用于设置合并开始的行号
return {
rowspan: 2, //合并的行数
colspan: 1 //合并的列数，设为０则直接不显示
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
Example image:
Dynamically merge columns based on id data.
Function code: The
data source needs to be sorted according to the judgment conditions. I am taking id as an example here.
var Main = {
data() {
return {
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
},
{
id: '12987122',
name: '王小虎',
amount1: '123',
amount2: '12',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
},
{
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
}
],
merge:[], //存放需要合并的行
pos:'' //需要合并行下标
};
},
created() {
this.getSpanArr(this.tableData)
},
methods: {
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.merge.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
//根据相同id进行合并,根据需要可进行修改
if (data[i].id === data[i - 1].id) {
this.merge[this.pos] += 1;
this.merge.push(0);
} else {
this.merge.push(1);
this.pos = i;
}
}
}
},
SpanCellMerge({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.merge[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
data is the data we get from the background, usually an array; merge is an empty array, used to store the number of merged records in each row;
pos is the index of merge. The above code means: if it is the first record (index is 0), add 1 to the array and set the index position;
if it is not the first record, judge whether it is equal to the previous record, if it is equal, then Add element 0 to merge, and the previous element +1, which means the number of merged rows +1, and then reciprocate to get the merged number of all rows, and 0 means that the row is not displayed.
Page code:
<template>
<div>
<el-table
:data="tableData"
:span-method="SpanCellMerge"
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>