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>

效果图

在这里插入图片描述

发布了51 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44171757/article/details/97115879