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

╰+攻爆jí腚メ 2021-11-27 05:34 544阅读 0赞

# 在合并行之前，先要对整个数据进行排序 #

<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>

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20211126/b60070ad8d3647df8f9f52fdef19d100.png

发表评论取消回复

表情：

评论列表（有 0 条评论，544人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq sort 对象数组排序

var objArr=[{ },{ },{ },{ },....,{ }] objArr = objArr.sort( function(a

左手的ㄟ右手/ 2023年06月11日 04:25/ 0 赞/ 41 阅读

相关两个数组对象合并

\`\`\` let array = \[\{label:9000,items:\[\{a:'相同'\}\]\},\{label:2000,items:\[\{a:'相同'\

我会带着你远行/ 2023年06月10日 04:26/ 0 赞/ 22 阅读

相关 antd Table 组件动态合并单元格

antd Table 组件动态合并单元格前言 Table 组件静态数据合并单元格 Table 组件动态数据

电玩女神/ 2022年12月02日 00:26/ 0 赞/ 1013 阅读

相关 sort封装排序对象数组

对象数组排序多个数组 const links = this.$sortNumber(linksList, 'linNum') const assign

深藏阁楼爱情的钟/ 2022年11月21日 15:14/ 0 赞/ 252 阅读

相关 element table 组件内容换行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEy

分手后的思念是犯贱/ 2022年10月17日 04:07/ 0 赞/ 446 阅读

相关数组排序sort()

我们知道单纯用sort()函数有时是无法准确达到排序效果的，所以我们需要写个排序的函数再结合sort()方法 function sortNum(a,b) {

悠悠/ 2022年09月25日 09:19/ 0 赞/ 233 阅读

相关利用sort对多字段排序

线上直播环境中需要从nginx访问日志中分析每个client在一个小时内的访问情况，需要使用sort对多重字段进行排序。 sort基础知识回顾下面是需要用到的sort的知

￡神魔★判官ぃ/ 2022年07月15日 23:21/ 0 赞/ 167 阅读

相关 JSON对象字符串数组多字段（多列）排序

JSON对象字符串数组，多字段（多列）排序今天看到我写的另一篇JSON对象数组排序的文章，突然想到了另一种，更简便，更快速的方法，排序结果跟原来的一样： func

曾经终败给现在/ 2022年06月03日 05:24/ 0 赞/ 201 阅读

相关 javascript数组多字段排序

对于需要多字段排序的数组，我们可以借用javascript的原生数组api来完成，这个api就是sort方法。 arr.sort(sortby) 这个方法的so

「爱情、让人受尽委屈。」/ 2022年05月16日 11:47/ 0 赞/ 470 阅读

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

在合并行之前，先要对整个数据进行排序 <el-table :data="djmxListData" :span-method="objectSpanMethod"

╰+攻爆jí腚メ/ 2021年11月27日 05:34/ 0 赞/ 545 阅读