element UI 合并列后，进行数字排序
最近业务需要实现单元格合并列的功能，并且在第一列用数字进行排序，今天整理了一下实现过程，贡献给在座的各位
实现后的样式如下
直接上代码
html代码
<template>
<div>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="sequence"
label="第一种序号排序">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
label="第二种序号排序">
<template slot-scope="scope">
<span>{
{ scope.$index + 1 }}</span>
</template>
</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>
js代码
export default {
name: "Test",
data() {
return {
tableData: [{
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
name: '黄晓明',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
name: '黄晓明',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
name: '小王',
amount1: '539',
amount2: '4.1',
amount3: 15
}, {
name: '小李',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if(columnIndex === 0 ) {
const _row = (this.flitterData(this.tableData).one)[rowIndex];
const _col = _row > 0 ? 1 : 0;
let arr=this.flitterData(this.tableData).one,
Nosort=0;
for(let i in arr){
if(arr[i]>0){
Nosort+=1;
}
//为编号赋值，如果_row>0,序号+1，如果_row=0,序号保持不变
for(let j in this.tableData){
if(i===j){
this.tableData[i].sequence=Nosort;
}
}
}
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 1) {
const _row = (this.flitterData(this.tableData).two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
flitterData(arr){
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0;
arr.forEach((item,index)=>{
if(index === 0){
spanOneArr.push(1);
spanTwoArr.push(1);
}else{
if(item.name === arr[index - 1].name){
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
}else{
spanOneArr.push(1);
concatOne = index;
};
if(item.name === arr[index - 1].name){
//第二列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
}else{
spanTwoArr.push(1);
concatTwo = index;
};
}
});
return {
one: spanOneArr,
two: spanTwoArr
}
},
}
};
上边的功能实现了两种序号的排序方式，第二种序号的排序方式是直接通过插槽直接累加来排序的，在我的业务中并不适用。第一种排序方式是通过Nosort字段判断当前行是否已经合并之后在进行累加的，完美解决了我的需求。