vue table组件合并行++++对象数组多个字段排序sort

方法一、在合并行之前，先要对整个数据进行排序

<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(){//获取table数据
				...请求后台拿到数据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=[]; //初始化数组，防止多次调用时出bug
                this.pos=0;      //初始化数据，防止多次调用时出bug
				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>

效果图

方法二、

参考文章：https://juejin.cn/post/6930897196732645390