element table 合并单元格(:span-method)

news2025/2/24 3:07:50

element table 需要最后一列单元格进行单一到左

需要一个地方对整个表格做操作,没有UI设计,需要自行脑补设计
把最后一列全部合并,做成一列输出就好;





效果

在这里插入图片描述





核心代码

  • 视图
<el-table :data="loseDataList" style="width: 100%" border :span-method="objectSpanMethod">
  <el-table-column prop="startDate" label="开始时间" align="center" />
  <el-table-column prop="endDate" label="结束时间" align="center" />
  <el-table-column prop="bedSide" label="边" align="center" />
  <el-table-column prop="loseNumber" label="丢失包数" align="center" />
  <el-table-column prop="loseTime" label="丢失时长" align="center" />
  <el-table-column label="操作" align="center">
    <template>
      <el-button type="primary" @click="loseDataList=[]">点击隐藏</el-button>
    </template>
  </el-table-column>
</el-table>
  • 合并

columnIndex :第几列
{ rowspan: this.loseDataList.length, colspan: 1 } :合并那些数据


   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     console.log(row, column, rowIndex, columnIndex)
     if (columnIndex === 5) {
       return {
         rowspan: this.loseDataList.length,
         colspan: 1
       }
     }
   },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1670212.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

​​​【收录 Hello 算法】5.3 双向队列

目录 5.3 双向队列 5.3.1 双向队列常用操作 5.3.2 双向队列实现 1. 基于双向链表的实现 2. 基于数组的实现 5.3.3 双向队列应用 5.3 双向队列 在队列中&#xff0c;我们仅能删除头部元素或在尾部添加元素。如图 5-7 所示&#xff0c;双向队列&#xff08…

阿贝云免费虚拟主机和免费云服务器评测

阿贝云是一家知名的云服务提供商&#xff0c;提供免费虚拟主机和免费云服务器服务。他们的服务质量一直备受好评&#xff0c;受到了广大用户的青睐。使用阿贝云的免费虚拟主机和免费云服务器&#xff0c;用户可以轻松地搭建自己的网站和应用&#xff0c;享受稳定的服务和优质的…

二分图及图匹配(图论学习总结部分内容)

文章目录 前言四、二分图及图匹配二分图常见模型二分图例题 e g 1 : eg1: eg1: [ Z J O I 2009 ZJOI2009 ZJOI2009​\][假期的宿舍](https://ac.nowcoder.com/acm/contest/34649/B)(二分图最大匹配板题) e g 2 : eg2: eg2:​​ [C-Going Home](https://ac.nowcoder.com/acm/con…

《深入浅出LLM基础篇》(四):主流大模型分类介绍

&#x1f389;AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料&#xff0c;配有全面而有深度的专栏内容&#xff0c;包括不限于 前沿论文解读、…

Mysql数据存储格式分析

一、整体存储逻辑 1.1 Mysql数据存放位置 不同的存储引擎&#xff0c;对Mysql数据的存储是不同的。新建一个test数据库&#xff0c;里面有t1,t2和test5三张表&#xff0c;以Innodb和Myisam存储引擎为例&#xff1a; Innodb存储引擎&#xff1a; .frm文件&#xff1a;与表相…

如何查看MySQL binlog日志

1、查看MySQL是否开启binlog日志 SQL&#xff1a;show variables like ‘%log_bin%’; log_bin:on 是开启状态 若是OFF&#xff0c;则需要开启binlog日志。 开启方式&#xff1a;打开mysql配置文件my.cnf&#xff0c;在[mysqlId]下面增加 log-binmysql-bin 查看binlog日志 …

【客户案例】禅道软件助力长虹新网实现研发项目管理创新

四川长虹新网科技有限责任公司&#xff08;以下简称长虹新网&#xff09;深耕全球运营商市场二十多年&#xff0c;具备行业领先的软硬件研发、制造、全球化市场营销能力&#xff0c;持续服务国内外200多家主流电信及广电运营商、垂直行业服务商&#xff0c;与合作伙伴共同成长。…

快团团怎么做帮卖团长/供货大团长(如何从小白到优质团长)?

一名小白想要成长为快团团的优质团长&#xff0c;可以遵循以下步骤和策略&#xff1a; 了解平台与注册成为团长&#xff1a; 首先&#xff0c;熟悉快团团平台的操作流程和规则。快团团是一个基于微信的小程序&#xff0c;专注于社区团购业务。通过微信扫描团长资源二维码或在快…

NodeJS编写后端接口

技术栈 1.express&#xff1a;Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建 各种 Web 应用&#xff0c;和丰富的 HTTP 工具&#xff0c;使用 Express 可以快速地搭建一个完整功能的网站。 2.mysql&#xff1a;用于操作MySQL数据库 3.bod…

pytorch常用内置loss函数与正则化技术(补充小细节)

文章目录 前言一、常用损失函数(后面用到了新的会一一补充)1.1 回归中的损失函数1.1.1 nn.MSELoss()示例1:向量-向量示例2:矩阵--矩阵(维度必须一致才行)1.2 分类中的损失函数1.2.1 二分类(1)nn.BCELoss --- 二分类交叉熵损失函数示例1:向量-向量示例2:矩阵--矩阵(维…

618买什么划算?618买啥好?618数码好物推荐,必买清单大放送!

随着一年一度的618购物狂欢节的临近&#xff0c;作为数码领域的资深爱好者&#xff0c;我感到有责任为大家推荐精心挑选的数码精品。无论你是追逐科技尖端的探索者&#xff0c;还是希望通过智能装备提升生活品质的时尚人士&#xff0c;这里的每一款产品都能与你的心灵产生共鸣。…

基于PHP开发的图片高清无损在线压缩源码系统 带完整源代码以及搭建教程

系统概述 高清无损在线压缩源码系统基于PHP语言开发&#xff0c;结合GD库和ImageMagick等图像处理工具&#xff0c;实现了对JPEG、PNG、GIF等多种图片格式的高清无损压缩。系统采用B/S架构&#xff0c;用户只需通过浏览器访问系统界面&#xff0c;即可实现图片的上传、压缩、预…

【小白入门篇6】常识|怎么计算模型需要的资源

01 背景 各个公司相继推出大模型, 有开源和不开源,有些技术爱好者也开始心痒难耐&#xff0c;萌生了私有本地模型,甚至有伙伴构建大模型并进行训练的想法, 大模型不仅比拼技术, 也是比拼爹(资源)的存在, 我个人在实战经历经常问自己,到底需要什么样配置才能跑起来这个模型, 完…

玩转cpp小项目星球3周年了!

公众号原创文章破600&#xff01;玩转cpp小项目星球目前已运营3年&#xff0c;平时不怎么宣传&#xff0c;借此机会给大家分享一下这三年里面我沉淀了哪些内容。里面包含&#xff1a; 1.小项目&#xff1a;一些核心模块的拆解&#xff0c;例如&#xff1a;grpc、mutex、线程池等…

python数据分析——数据分类汇总与统计

数据分类汇总与统计 前言一、Groupby分类统计语法按列分组示例一示例二示例三 遍历各分组示例 使用字典和Series分组示例 使用函数分组示例 二、数据聚合groupby的聚合函数示例一示例二 逐列及多函数应用示例一示例二 返回不含行索引的聚合数据示例 三、一般性的“拆分-应用-合…

程序员日志之星际争霸

目录 传送门正文日志1、概要2、星际争霸编年史2.1、最早版本 Alpha2.2、早期版本 Early Beta2.3、测试版 Beta2.4、正式版 StarCraft2.5、母巢之战测试版 BroodWar Beta2.6、星际争霸-母巢之战 BroodWar2.7、地图编辑器&#xff08;1.07及以上&#xff09; StarEdit2.8、《星际…

掌握决策之道:层次分析法(AHP)的步骤、应用与局限性

目录 一、层次分析法简介 举一个小例子&#xff1a; 评价类问题可用打分解决&#xff0c;比如&#xff1a;小华高考结束后&#xff0c;在华科和武大两所学校之间做抉择。 评价类问题可用打分解决 二、层次分析法的步骤 &#xff08;一&#xff09;一道引出层次分析法的例…

造纸废水处理有哪些工艺设备

造纸废水处理是一个复杂的过程&#xff0c;因为造纸过程中产生的废水含有大量的有机物、悬浮物、色素、油脂、木质素、纤维素等污染物。为了有效处理这些废水&#xff0c;通常需要采用一系列的工艺设备。以下是一些常见的造纸废水处理工艺设备&#xff1a; 格栅&#xff1a;用于…

申贷时,银行级大数据自己能查到吗?

随着金融风控的不断健全&#xff0c;大数据作为辅助的风控工具正在被越来越多的银行和机构使用。在进行申贷时&#xff0c;银行通常会进行大数据查询&#xff0c;以便评估申请人的信用状况。那么&#xff0c;这些大数据自己能查到吗?接下来本文就为大家详细介绍一下&#xff0…

OKHTTP 3.12.0 以后版本 headers 中不可携带中文

今天遇到的报错&#xff1a; java.lang.llegalArgumentException: Unexpected char 0x957f at 0 in x-brand value: 电视堆栈 okhttp3.Headers.checkValue(Headers.java:272) okhttp3.Headers$Builder.add(Headers.java:312) okhttp3.Request$Builder.addHeader(Request.iava:…