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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机桥接模式连接失败解决方案

问题&#xff1a; 虚拟机之前使用一直没有问题&#xff0c;某次开机后不能正常使用桥接模式了&#xff0c;确认防火墙等相关都已关闭设置好。 解决方案&#xff1a; 添加新的网络适配器后&#xff0c;改成桥接模式&#xff0c;然后保存后重新打开&#xff0c;可以正常使用

MSMQ消息队列

MQ是一种企业服务的消息中间节技术&#xff0c;这种技术常常伴随着企业服务总线相互使用&#xff0c;构成了企业分布式开发的一部分&#xff0c;如果考虑到消息的发送和传送之间是可以相互不联系的并且需要分布式架构&#xff0c;则可以考虑使用MQ做消息的中间价技术&#xff0…

天锐绿盾 | 企事业单位 / 公司办公电脑文件防泄密系统,文件、文档、设计图档、开发过程中的源代码、音视频等数据资料透明加密保护软件

天锐绿盾是一款专为企事业单位及公司设计的电脑文件安全防护系统&#xff0c;主要功能是实现对办公电脑中重要文件和数据的加密保护&#xff0c;以防数据泄露。这款软件通过采用透明加密技术&#xff0c;能够在不影响用户正常工作流程的前提下&#xff0c;对各类敏感信息进行自…

每天认识新职业——网络工程师

一、网络工程师是什么 网络工程师是通过学习和训练&#xff0c;掌握网络技术的理论知识和操作技能的网络技术人员。网络工程师能够从事计算机信息系统的设计、建设、运行和维护工作。相关职业&#xff1a;系统集成工程师、计算机硬件工程师职业其他名称&#xff1a;网络管理员、…

IO的阻塞和非阻塞浅析

在操作系统和网络编程中&#xff0c;IO&#xff08;输入/输出&#xff09;操作是一个非常重要的概念。 在处理IO的时候&#xff0c;阻塞和非阻塞都是同步IO。只有使用了特殊的API才是异步IO。 ——陈硕大神 网络IO层面 典型的一次IO的两个阶段是什么&#xff1f; 数据准备 和…

k8s介绍

一、前言 Kubernetes&#xff08;通常简称为 K8s&#xff09;是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序&#xff0c;它提供了丰富的功能使得用户能够轻松地管理大规模的容器集群&#xff0c;包括自动化部署和扩展、服务发现和负载均衡、存…

落地领域大模型应知必会 (1) :主要微调方法总览

在如今高速发展的人工智能领域&#xff0c;高效地利用大语言模型&#xff08;LLMs&#xff09;已经变得越来越重要。但是&#xff0c;利用大语言模型的方式太多了&#xff0c;如果你才刚刚开始接触它&#xff0c;可能会感到不知所措。 实质上&#xff0c;我们可以通过两种主要…

中控系统智能化管理,多媒体展厅展示效果大升级!

在当今数字展厅设计的热潮中&#xff0c;多媒体互动理念已经崭露头角&#xff0c;成为各大企业竞相采纳的主流设计方式&#xff0c;它们通过集成的多媒体展示手段&#xff0c;为企业提供了一个全新的平台&#xff0c;来展现其形象、产品与服务&#xff0c;更通过互动的方式加深…

NSSCTF | [SWPUCTF 2021 新生赛]caidao

打开题目&#xff0c;只有一个图片&#xff0c;图片中间是一个一句话木马的一部分&#xff0c;意思是服务器可以执行通过POST的请求方式传入参数为wllm的命令&#xff0c;那这就是典型的命令执行&#xff0c;当然&#xff0c;也可以使用蚁剑或者菜刀连接这个木马 一句话木马的…

在Ubuntu 24.04 LTS (Noble Numbat)上安装nfs server以及nfs client

在Ubuntu 24.04 LTS (Noble Numbat)上,我使用的是最小化安装, 当然server版本的Ubuntu在安装的时候可能会有网络不通的问题,解决办法见如下文章: ubuntu 24.04 server 仅NAT模式上网设置静态IP设置-CSDN博客文章浏览阅读489次,点赞9次,收藏3次。在Ubuntu 24.04 上设置网…

Modbus TCP转CAN网关在不同行业中的应用以及其使用上的优势

倍讯科技Modbus TCP转CAN网关通常被用于工业自动化领域&#xff0c;特别是在需要连接现有Modbus TCP网络和CAN总线设备的场景中。以下是该网关在不同行业中的应用以及其使用上的优势&#xff1a; 1. 制造业&#xff1a; - 在制造业中&#xff0c;各种类型的设备和机器通常使用不…

CANape测量分析标定

CANape创建工程及标定 1 创建工程 1. 创建ape工程 打开CANape软件,创建新的ape工程 2.添加数据库文件 通过添加Device(确定信号源)的方式加载数据库文件 A2L:通过添加CCP、 XCP、VX1000的Device DBC:对总线报文检测 CAN CDD: 诊断功能 Diagnostic 如需导入MAP文件…

企业智能照明控制系统 为企业实现智能化照明管理

工厂车间传统照明的问题及智能照明系统的优势 谢继东15821713522 一、工厂传统照明存在的问题&#xff1a; 1、工业厂房一般建筑结构高&#xff0c;跨距大。灯具安装悬挂高&#xff0c;照明空间大&#xff0c;灯具回路多&#xff0c;而车间是厂区对照明要求较高的区域&#xf…

数据结构复习指导之树与二叉树的应用(哈夫曼和并查集)

文章目录 树与二叉树的应用 考纲内容 复习提示 1.哈夫曼树和哈夫曼编码 1.1哈夫曼树的定义 1.2哈夫曼树的构造 1.3哈夫曼编码 2.并查集 2.1并查集的概念 2.2并查集的存储结构 2.3并查集的基本实现 2.4并查集实现的优化 树与二叉树的应用 考纲内容 &#xff08;一&…

Java Web开篇

Java Web开篇 大纲 整个内容梳理 具体案例 整个内容梳理 这是前端和后端组成的系统的框架结构

区块链的跨链交互:从学校间交流看跨链技术

区块链是一种去中心化的分布式账本技术&#xff0c;它通过加密学和共识机制来确保数据的安全性和不可篡改性。每个区块链就像一所独立的学校&#xff0c;有自己的制度、学生和重点专业。它们各自运行&#xff0c;有时在同一领域展开不同的活动。随着区块链技术的不断发展&#…

Java的VO,BO,PO,DO,DTO

写在前面 本文看下VO&#xff0c;BO&#xff0c;PO&#xff0c;DO&#xff0c;DTO&#xff0c;都是啥&#xff01; 1&#xff1a;正文 先看一张图&#xff0c;看了图就能知道个大概了&#xff1a; 1.1&#xff1a;PO 全称是persistent object&#xff0c;对应数据的表&am…

一站式搭建交友平台-交友系统源码-支持H5小程序+带安装说明+可封装APP-交友网站系统平台搭建

简述 社交交友系统是一种比较复杂的系统&#xff0c;需要涉及到前端、后端、数据库等多个方面。具体实现方式因不同开发者和需求而异。 功能 1、用户注册、登录和注销功能。 2、用户资料填写和修改功能&#xff0c;包括头像、昵称、性别、年龄、个人介绍等信息。 3、用户之间…

你了解手机设备的dpr吗?它和CSS又有什么联系?

当我们在前端开发中涉及到devicePixelRatio时&#xff0c;我们实际上在谈论屏幕像素密度&#xff0c;即每英寸的像素数。这个属性告诉我们在一个设备上的一个CSS像素对应多少物理像素。 目录 知识点概览 dpr值的计算 dpr的用处 知识点概览 比如我们新买了一个手机&#xff0…

怎样才能不当数据泄露的下一个受害者?

在数字化时代&#xff0c;数据泄露成为了所有企业必须面对的难题。无论规模大小&#xff0c;每家公司都可能成为黑客攻击的目标&#xff0c;从而遭受数据泄露的风险。然而&#xff0c;通过采取一系列预防措施&#xff0c;企业可以极大地降低成为下一个受害者的可能性。 教育员…