在合并行之前,先要对整个数据进行排序
<el-table
:data="djmxListData"
:span-method="objectSpanMethod" 《--!绑定合并函数,里面写合并逻辑--》
style="width: 100%">
<el-table-column
prop="fklx"
label="测试列"
width="50">
</el-table-column>
</el-table>
<script>
export default {
methods:{
getSlectList(){
...请求后台拿到数据this.djmxListData,
《--!并用sort方法进行排序,要排多个字段就多写几个sort函数,此例我排了2个字段--》
this.djmxListData = this.djmxListData.sort(
function(a, b)
{
if(a.ZT === b.ZT) return -1;
if(a.ZT !== b.ZT) return 1;
return 0;
}
);
this.djmxListData = this.djmxListData.sort(
function(a, b)
{
if(a.fklx < b.fklx) return -1;
if(a.fklx > b.fklx) return 1;
return 0;
}
);
this.getSpanArr(this.djmxListData)
},
getSpanArr(data){
this.spanArr=[];
this.pos=0;
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
if (data[i].fklx === data[i - 1].fklx) {
《--!合并fklx丰枯类型,若想合并多个字段,则多定义几个getSpanArr类似的函数--》
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }){
绑定在el-tabel上的进行合并行的方法
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
}
}
</script>
效果图