首页 > 其他分享 >Vue2 e-table 合并第一列单元格

Vue2 e-table 合并第一列单元格

时间:2024-07-25 15:50:28浏览次数:14  
标签:index const spanArr 单元格 合并 item Vue2 position table

需求:名字一样的合并单元格

前端思路:方法一

// 处理表格数据,将同一名称的数据进行组合
// tableData 是请求后端返回的List<对象>
    handleData(tableData) {
      debugger
      const keys = [] // 唯一值的数组
      tableData.forEach((item, index) => {
        if (!keys.includes(item.group_name)) {// group_name 需要合并的名称 // 如 生物干化  掺烧 等
          keys.push(item.group_name)
        }
      })

      const temp = []
      keys.forEach((item) => { // 将同一名称的数据放在相邻位置
        this.tableData.forEach((cell) => {
          if (item === cell.group_name) {
            temp.push(cell)
          }
        })
      })

      this.tableData = temp
      this.getSpanArr(this.tableData)
    },

    /**
     *  获取单元格的合并行数
     * */
    getSpanArr(data) {
      debugger
      const spanArr = []
      let position // 当前合并的行位置(连续相同名称的第一条数据位置)
      // 每一条数据合并的行数,避免表格错乱!
      data.forEach((item, index) => {
        if (index === 0) { // 第一行, 不进行处理
          spanArr.push(1)
          position = 0
        } else {
          if (data[index].group_name === data[index - 1].group_name) {
            // 当条数据跟上一条数据名称相同,要合并
            spanArr[position] += 1 // 首条相同名称行合并行数增加
            spanArr.push(0) // 当前行消除
          } else { // 不需要处理的数据
            spanArr.push(1)
            position = index
          }
        }
      })
      this.spanArr = spanArr
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格,   第二行占2(2,3)格,  第三行占0 格,第四行占2(4,5)格,第五行占0行,第六行占1(6)格
      let Arr = []
      Arr = this.spanArr
      const _row = Arr[rowIndex] // 合并行数
      const _col = _row > 0 ? 1 : 0 // 合并列数,1:不改变,0:被消除
      if (columnIndex === 0) { // 对第一列进行操作
        return { // 分格子 主要是 控制这里返回值
          rowspan: _row,
          colspan: _col
        }
      }
    },

前端思路:方法二(配合后端省去一步)

 

// 处理表格数据,将同一名称的数据进行组合
// handleData(tableData) {
//   debugger
//   const keys = [] // 唯一值的数组
//   tableData.forEach((item, index) => {
//     if (!keys.includes(item.group_name)) {
//       keys.push(item.group_name)
//     }
//   })
//
//   const temp = []
//   keys.forEach((item) => { // 将同一名称的数据放在相邻位置   由后端 直接分组返回 省去这个步骤
//     this.tableData.forEach((cell) => {
//       if (item === cell.group_name) {
//         temp.push(cell)
//       }
//     })
//   })
//
//   this.tableData = temp
//   this.getSpanArr(this.tableData)
// },

/**
 *  获取单元格的合并行数
 * */
getSpanArr(data) {
  const spanArr = []
  let position // 当前合并的行位置(连续相同名称的第一条数据位置)
  // 每一条数据合并的行数,避免表格错乱!
  data.forEach((item, index) => {
    if (index === 0) { // 第一行, 不进行处理
      spanArr.push(1)
      position = 0
    } else {
      if (data[index].group_name === data[index - 1].group_name) {
        // 当条数据跟上一条数据名称相同,要合并
        spanArr[position] += 1 // 首条相同名称行合并行数增加
        spanArr.push(0) // 当前行消除
      } else { // 不需要处理的数据
        spanArr.push(1)
        position = index
      }
    }
  })
  this.spanArr = spanArr
},

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格,   第二行占2(2,3)格,  第三行占0 格,第四行占2(4,5)格,第五行占0行,第六行占1(6)格
  let Arr = []
  Arr = this.spanArr
  const _row = Arr[rowIndex] // 合并行数
  const _col = _row > 0 ? 1 : 0 // 合并列数,1:不改变,0:被消除
  if (columnIndex === 0) { // 对第一列进行操作
    return { // 分格子 主要是 控制这里返回值
      rowspan: _row,
      colspan: _col
    }
  }
},

后端

小结:

其实最主要的是 objectSpanMethod     // const Arr = [1, 2, 0, 2, 0, 1] // 示例  共6行 第一行占1格,   第二行占2(2,3)格,  第三行占0 格,第四行占2(4,5)格,第五行占0行,第六行占1(6)格

 

关于:导出(同样格式化导出)观察规律

@AllArgsConstructor
public class CustomMergeStrategy implements RowWriteHandler {

    // [1,2,0,2,0,1]
    // 合并的数据
    private List<Integer> spanArr;


    @Override
    public void afterRowDispose(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder, Row row,
                                Integer relativeRowIndex, Boolean isHead) {

        // 如果是标题,则直接返回
        if (isHead) {
            return;
        }

        Sheet sheet = writeSheetHolder.getSheet();

        // 合并单元格
        // 参数说明:开始行,结束行,开始列,结束列
        // 一行的数据 不用使用CellRangeAddress 自带合并
        //
        //[2, 0, 2, 0, 2, 0, 1] 个数
        // 0  1  2  3  4  5  6
        // 1  2  3  4  5  6  7
        int position = 0;
        if (ArrayUtil.isNotEmpty(spanArr) && spanArr.size() > 0) {
            for (int i = 0; i < spanArr.size(); i++) {
                position++;

                Integer i1 = spanArr.get(0);// 第一次值
                Integer i2 = spanArr.get(i);
                if (i1 >= 2 && i == 0) { // 第一种情况
                    CellRangeAddress cellRangeAddress = new CellRangeAddress(1, i1, 0, 0); // 合并第3-4行,第1列
                    sheet.addMergedRegionUnsafe(cellRangeAddress);
                } else if (i2 >= 2 && i > 0) {
                    CellRangeAddress cellRangeAddress = new CellRangeAddress(position, position + i2 - 1, 0, 0); // 合并第3-4行,第1列
                    sheet.addMergedRegionUnsafe(cellRangeAddress);
                }
            }
        }
    }


}

 

 // 前端传入的合并单元格
        List<Integer> spanArr = sewageVolumeVo.getSpanArr();
        Resource resource = new ClassPathResource("excel" + File.separator + "污水外运量.xlsx");
        EasyExcel.write(response.getOutputStream())
                .withTemplate(resource.getInputStream())
                .registerWriteHandler(new CustomMergeStrategy(spanArr))
                .sheet()
                .doFill(sewageVolumeDtoList);

 

标签:index,const,spanArr,单元格,合并,item,Vue2,position,table
From: https://www.cnblogs.com/lcaiqin/p/18323369

相关文章

  • Java CompletableFuture 异步超时实现探索
    简介JDK8中CompletableFuture没有超时中断任务的能力。现有做法强依赖任务自身的超时实现。本文提出一种异步超时实现方案,解决上述问题。前言JDK8是一次重大的版本升级,新增了非常多的特性,其中之一便是CompletableFuture。自此从JDK层面真正意义上的支持了基于事件的......
  • Qt基础 | QSqIRelationalTableModel 的使用
    文章目录一、QSqIRelationalTableModel的使用1.主窗口MainWindow类定义2.构造函数3.打开数据表3.1添加SQLite数据库驱动、设置数据库名称、打开数据库3.2创建数据模型及其属性设置、选择模型、设置代码字段的查询关系数据表、为关系型字段设置缺省代理组件4.实际字......
  • Java编程指南:高级技巧解析 - Excel单元格样式的编程设置
    最新技术资源(建议收藏)https://www.grapecity.com.cn/resources/前言在Java开发中,处理Excel文件是一项常见的任务。在处理Excel文件时,经常需要对单元格进行样式设置,以满足特定的需求和美化要求,通过使用Java中的相关库和API,我们可以轻松地操作Excel文件并设置单元格的样式。在......
  • 【GLIB】GHashTable
    1、定义structGHashTable{/*Noavailablefields*/}2、方法2.1newGHashTable*g_hash_table_new(GHashFunchash_func,GEqualFunckey_equal_func)创建一个引用计数为1的GHashTable对象。hash_func返回对象hash值,hash值决定对象存放位置。有一些通用类型......
  • manim边学边做--Table
    表格是一种常见的数据展示形式,manim提供了Table模块专门用于显示表格形式的数据。表格Table和上一节介绍的矩阵Matrix都是用来显示二维数据的,不过,Table的表现力更强,比如,它可以显示表头信息,列名信息等等。Table模块也细分了多个对象:通用Table:显示任何内容DecimalTable:表格内容......
  • CentOS6.3安装xtables-addons,实现流量复制&镜像克隆
    一、版本要求CentOS6.3,64位(内核版本2.6.32-279),iptables版本是自带的v1.4.7CentOS6.9--6.10也可以,其它版本没有测试。ubuntu22.04上没有安装成功。二、依赖安装yuminstallgccyuminstallgcc-c++yuminstalliptables-devel三、下载安装包下载地址:https://inai.d......
  • ava 集合框架全解析:Collection vs Collections,Comparable vs Comparator,HashSet 工作
    Java中的集合框架是开发过程中不可或缺的一部分,但初学者常常会混淆其中的术语,特别是Collection和Collections。这篇博客将详细介绍它们之间的区别,并进一步探讨Comparable和Comparator、HashSet的工作原理,以及HashMap和Hashtable的区别。Collection和Collecti......
  • 后端开发工程师vue2初识的学习
    博客主页:音符犹如代码系列专栏:JavaWeb关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞......
  • 使用iptables管控docker容器
    docker与iptables说明某些项目考虑到安全问题,需要启用iptables来进行加固。根据官方文档介绍(https://dockerdocs.cn/network/iptables/):在Linux上,Docker操纵iptables规则以提供网络隔离。尽管这是实现的详细信息,并且您不应修改Docker在iptables策略中插入的规则,但是如果您想要......
  • 配置文件mybatis-plus: global-config: db-config: table-prefix: true
    具体来说,table-underline的含义是:当table-underline设置为true时:假设你有一个实体类名为UserInfo,那么MyBatis-Plus会默认去数据库中寻找名为user_info的表(即,驼峰命名法自动转换为下划线命名法)。同理,如果你的数据库表名是user_info,但你的实体类名是UserInfo,那么M......