el-table合并单元格-行合并
合并单元格,如果id列值一致,则合并
原理
1、getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;
2、spanArr是一个空的数组,用于存放每一行记录的合并数;
3、 pos是spanArr的索引。
如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
如果不是第一条记录,则判断它与前一条记录是否相等,
如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,
以此往复,得到所有行的合并数,0即表示该行不显示
<template><div style="padding:20px"><el-table :data="tableData6" :span-method="objectSpanMethod" border ><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" label="数值 1(元)"></el-table-column></el-table></div>
<script>
export default {data() {return {spanArr: [],//用于存放每一行记录的合并数tableData6: [{id: "1",name: "王小虎",amount1: "234"},{id: "1",name: "王小虎",amount1: "165"},{id: "2",name: "王小虎",amount1: "324"},{id: "2",name: "王小虎",amount1: "621"},{id: "2",name: "王小虎",amount1: "539"}]};},mounted: function() {this.getSpanArr(this.tableData6);},methods: {getSpanArr(data) {// data就是我们从后台拿到的数据for (var i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].id === data[i - 1].id) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}console.log(this.spanArr);}},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示, [2,1]表示行的合并数rowspan: _row,colspan: _col};}}}
};
</script>
el-table合并单元格-行合并相关推荐
- html js 合并单元格合并单元格,js合并table单元格实例
这里展示js合并table的单元格,代码亲测可行 后台采用springmvc搭建 Record实体类public class Record { public String isp; public St ...
- 在DataGrid中合并单元格行
最近在做项目的时候经常遇到要合并单元格的情况,发现这个东西.net中并没有现成的方法,研究了一下,总结了两种方法. 这个主要都是行合并的,有以下两种情况 1.多行合并为一行,其中将某个或某几个单元格的 ...
- cxgrid 行合并单元格_合并单元格求和、计数、加序号
合并单元格求和 同时选中D2:D13单元格区域,编辑栏输入公式后按Ctrl+回车: =SUM(C2:C13)-SUM(D3:D13) 有两个地方需要注意,一是输入公式后,要按Ctrl+回车. 二是注意 ...
- HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址 转载请备注 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
- poi实现单元格行合并
首先展示出来的效果图,避免浪费大家查找的时间 效果如上:前后列合并,中间列不合并 代码如下: 方法参数: List<OrderExcl> orders, 一行记录对应一个类 XSSFWor ...
- NPOI word 合并单元格,合并一个区域
NPOI word 中的单元格合并.网上有不少教程将单元格合并的,但是基本都是在创建的单元的时候就开始合并了. 现在我们来看下,如何在创建好的表格上再做合并动作. NPOI 的XWPFTable的ro ...
- npoi获取合并单元格_NPOI合并单元格
var filePath = @"D:\练习\杂项\NPOI合并单元格\aaa.xlsx"; IWorkbook workbook = null; ISheet sheet = n ...
- 非规则合并单元格内容合并
实例需求:对于B列的非规则合并单元,将对应的A列单元格内容合并,并保存在B列中. 虽然在无数经典图书和文章中都告诫大家,合并单元格是数据分析的绊脚石,但是仍有无数数据分析行业的"烈士&quo ...
- excel模板合并单元格(jxls 合并单元格)---工具net.sf.jxls扩展---支持合并单元格(无需代码方式合并)
概述 excel比较常用的工具类就是poi和jxl当然后者已经停止维护很久而且只支持excel2003,不支持excel2007. 对2003版,最大行数是65536行 ,对2007以上版本,最大行数 ...
最新文章
- 【基础】使用cookies,实现免登陆(七)
- 百度地图api改变覆盖物背景实例及css颜色值简介
- 8 个你必须要掌握的 GitHub 实用技巧!
- 2、MySQL主键(PRIMARY KEY)
- Java基本数据类型及所占字节大小
- java oca_OCA第5部分中的Java难题
- 也谈被严重高估的安全技术
- 本人工作性质已改变,技术文摘随笔已经全部下线
- FFMpeg (一) av_register_all()
- 计算机代数与数论pdf,计算机代数和数论(maple).pdf
- 怎么把WORD中插入的图片改为统一尺寸的,看这里,文档中图片怎么改成同样大小
- CSGO显示FPS(帧数)指令集设置调用方法 2020年最新版本CSGO教程
- 虚拟路由器冗余协议——VRRP
- 会议OA项目之我的审批功能
- WTL自绘界面库(QsImageMgrCtrlBase)
- On ne change pas 做梦的fille
- python3d_Power BI将超越python和D3,成为数据可视化的福音、定性数据分析的未来?...
- 如何开启公众号的留言功能?这里有开通流程,赶紧收藏
- 海康Ehome协议接入EasyCVR视频融合平台播放视频失败的排查与解决
- HTTPS接口加密和身份认证