当前位置: 首页 > article >正文

el-table中合并垂直方向的单元格

el-table中合并垂直方向的单元格

  • 一、合并垂直方向单元格,有相同字段的合并一起

在这里插入图片描述

一、合并垂直方向单元格,有相同字段的合并一起

合并一起的都有相同的字段mergeType

      <el-table
        class="merge-table"
        :data="tableData"
        v-loading="isLoading"
        :span-method="spanMethod"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        size="mini"
        empty-text="暂无数据"
        :stripe="true"
        border
        style="width: 100%"
      >
      </el-table>


		spanMethod({ row, column, rowIndex, columnIndex }) {
		      if (
		        columnIndex === 0 ||
		        columnIndex === 1 ||
		        columnIndex === 2 ||
		        columnIndex === 3 ||
		        columnIndex === 4 ||
		        columnIndex === 5 ||
		        columnIndex === 6 ||
		        columnIndex === 7
		      ) {
		        // 缓存通过筛选条件得到的数组,避免重复计算
		        const tempArr = this.tableData.filter(b => b.mergeType === row.mergeType);
		        const isFirstRow =
		          rowIndex === this.tableData.findIndex(item => item.mergeType === row.mergeType);
		        if (isFirstRow) {
		          return {
		            rowspan: tempArr.length,
		            colspan: 1,
		          };
		        } else {
		          return {
		            rowspan: 0,
		            colspan: 0,
		          };
		        }
		      } else {
		        return {
		          rowspan: 1,
		          colspan: 1,
		        };
		      }
		    },


http://www.kler.cn/a/446114.html

相关文章:

  • Tekscan压力分布测量系统:电池安全与质量提升的保障
  • 关于小程序内嵌h5打开新的小程序
  • onlyoffice连接器 二次开发 合同等制式模板化技术开发方案【三】
  • 内容与资讯API优质清单
  • 6.3.1 MR实战:计算总分与平均分
  • 跟沐神学读论文-论文阅读管理
  • antdv-<a-table>的使用
  • Python 爬虫技术指南
  • 论文笔记:Buffer of Thoughts: Thought-Augmented Reasoning with Large Language Models
  • kratos源码分析:熔断器
  • 【长期有效】短链接生成-短链接-短网址-短链接生成接口-短链接转换接口-短网址URL生成-短链接-短网址-短域名-短链接
  • 【Java基础面试题024】Java中包装类型和基本类型的区别是什么?
  • Electron -- Electron Fiddle(一)
  • Android学习(七)-Kotlin编程语言-Lambda 编程
  • Springboot访问到Controller中不存在的接口BUG
  • 经典系统重塑(sql层)
  • 免登陆是什么?
  • AI Agent案例全解析:百度营销智能体(8/30)
  • 机动车油耗计算API集成指南
  • 简单工厂模式和策略模式的异同
  • Ubuntu RTSP 客户端和服务器实现
  • JVM中的方法绑定机制
  • 如何使用java来解析一个pdf文件呢?
  • 12_HTML5 Video(视频) --[HTML5 API 学习之旅]
  • 嵌入的律动,科技的心跳
  • 【mybatis】基本操作:详解Spring通过注解和XML的方式来操作mybatis