ElementUI的Table组件行合并上手指南

ElementUI的Table组件行合并 ,示例用官网vue3版的文档

<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="姓名" /><el-table-column prop="amount1" label="数值 1(元)" /><el-table-column prop="amount2" label="数值 2(元)" /><el-table-column prop="amount3" label="数值 3(元)" />
</el-table>
export default {data() {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10,},{id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12,},{id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9,},{id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},{id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15,},],// 用于行合并的数组,那就要在某一列下使用,此例子用于第一、二列// 每个元素是一行,0标识要隐藏第一列,非0数字标识此行要合并的行数spanArr: [3, 0, 0, 2, 0, 2, 0, 1, 3, 0], // 比如开头的3,0,0 从第一行开始合并3行,隐藏第二三行的第一列spanArr2: [2, 0, 1, 1, 1, 2, 0, 1, 1, 2],};},methods: {// 行合并范例objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 处理第一列if (columnIndex === 0) {let _row = this.spanArr[rowIndex];let _col = _row > 0 ? 1 : 0; // 0表示隐藏return {rowspan: _row,colspan: _col,};}// 处理第二列if (columnIndex === 1) {let _row = this.spanArr2[rowIndex];let _col = _row > 0 ? 1 : 0; // 0表示隐藏return {rowspan: _row,colspan: _col,};}},},
};

效果:

在这里插入图片描述

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

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

相关文章

VS配置PCO相机SDK环境

VS配置PCO相机SDK环境 概述:最近要用到一款PCO相机,需要协调其他部件实现一些独特的功能。因此需要用到PCO相机的SDK,并正确配置环境。良好的环境是成功的一半。其SDK可以在官网下载,选择对应版本的安装即可。这里用的是pco.cpp.1.2.0 Windows,VS 2022 专业版。 链接: P…

【TensorFlow 精简版】TensorFlow Lite

目录 一 TensorFlow Lite简介 二 开发 三 开始使用 一 TensorFlow Lite简介 TensorFlow Lite 是一组工具&#xff0c;可帮助开发者在移动设备、嵌入式设备和 loT 设备上运行模型&#xff0c;以便实现设备端机器学习。 针对设备端的机器学习进行的优化&#xff1a; ① 延时&…

oracle下载

前言&#xff1a; 官网上提供都是最新的什么19c 21c这些版本&#xff0c;我要的是 11g 12c 或者更老的 8i 9i 这些版本。 准备下载一个oracle12c 版本&#xff0c;但是找了很久&#xff0c;最终…详情请看下面 oracle 数据库版本介绍 Oracle数据库有多个长期支持版本&#x…

格密码基础:子格,q-ary垂直格与线性代数

目录 一.写在前面 二.子空间垂直 2.1 理论解释 2.2 举例分析 三. 零空间 3.1 零空间与q-ary垂直格 3.2 零空间与行/列空间 四. 格密码相关 一.写在前面 格密码中的很多基础原语都来自于线性代数的基本概念&#xff0c;比如举几个例子&#xff1a; 格密码中的非满秩格…

2022年全球软件质量效能大会(QECon上海站)-核心PPT资料下载

一、峰会简介 近年来&#xff0c;以云计算、移动互联网、物联网、工业互联网、人工智能、大数据及区块链等新一代信息技术构建的智能化应用和产品出现爆发式增长&#xff0c;突破了对于软件形态的传统认知&#xff0c;正以各种展现方式诠释着对新型智能软件的定义。这也使得对…

❀My小学习之排序算法❀

目录 排序算法&#xff08;Sorting algorithm&#xff09;:) 一、定义 二、分类 三、评价标准 排序算法&#xff08;Sorting algorithm&#xff09;:) 一、定义 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的…

docker学习(十九、network使用示例bridge)

文章目录 一、容器网络分配情况1.启动容器2.查看容器的network3.容器网络分配 二、bridge1.bridge详细介绍2.实践bridge两两匹配3.创建network&#xff0c;默认bridge network相关内容&#xff1a; docker学习&#xff08;十八、network介绍&#xff09; docker学习&#xff08…

一.windows2012搭建fpt服务器和常见端口介绍

一.windows2012搭建fpt服务器和常见端口介绍 1.打开防火墙2.创建组2.1打开计算机管理2.2创建组并且设置名称和描述 3.创建用户3.1设置用户密码和名称3.2把用户归属于组3.3把user删除掉3.4点击添加然后点高级3.5点击立即查找选择之前设定的组 4.安装ftp服务器4.1点击添加角色和功…

仓储革新:AR技术引领物流进入智慧时代

根据《2022年中国物流行业研究&#xff1a;深度探析行业现状&#xff08;智能设备及智能软件&#xff09;》&#xff0c;报告中提及&#xff1a;“中国社会物流总额依然保持着较为良好的增长态势&#xff0c;年增速已恢复至常年平均水平。2021年社会物流总额细分中工业物流总额…

千巡翼X4轻型无人机 赋能智慧矿山

千巡翼X4轻型无人机 赋能智慧矿山 传统的矿山测绘需要大量测绘员通过采用手持RTK、全站仪对被测区域进行外业工作&#xff0c;再通过方格网法、三角网法、断面法等进行计算&#xff0c;需要耗费大量人力和时间。随着无人机航测技术的不断发展&#xff0c;利用无人机作业可以大…

javaEE -18(11000字 JavaScript入门 - 3)

一&#xff1a;事件 &#xff08;高级&#xff09; 1.1 注册事件&#xff08;绑定事件&#xff09; 给元素添加事件&#xff0c;称为注册事件或者绑定事件&#xff0c;注册事件有两种方式&#xff1a;传统方式和方法监听注册方式 传统注册方式 &#xff1a; 利用 on 开头的…

20231227在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单后摄像头ov13850

20231227在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单后摄像头ov13850 2023/12/27 18:40 1、简略步骤&#xff1a; rootrootrootroot-X99-Turbo:~/3TB$ cat Android11.0.tar.bz2.a* > Android11.0.tar.bz2 rootrootrootroot-X99-Turbo:~/3TB$ tar jxvf Androi…

Find My化妆包|苹果Find My技术与化妆包结合,智能防丢,全球定位

化妆包顾名思义&#xff0c;那就是装载、收纳化妆品的包包&#xff0c;从而方便妹子可以随时随地取用。化妆包可以说是内有乾坤&#xff0c;比如睫毛膏、唇彩、粉饼、眉笔、防晒霜、吸油纸等等。按功能分为多功能型专业化妆包&#xff0c;旅游用简约型化妆包和家用小化妆包。按…

组织框架概念澄清及表设计

组织 企业组织 企业组织就是企业正式编制&#xff0c;以单独的编制&#xff0c;是个人在企业所在的长久的家&#xff0c;类似于所说的考编&#xff0c;在企业体制内的位置&#xff0c;可能一个人在组织有不同的岗位&#xff0c;也可能有不同的项目组&#xff0c;但是&#xf…

21.仿简道云公式函数实战-数学函数-COS

1. COS函数 COS 函数可用于计算角度的余弦值&#xff0c;返回 -1 到 1 之间的数值。 2. 函数用法 COS(弧度) 3. 函数示例 如计算 COS(60) 的值&#xff0c;可设置公式为COS(RADIANS(60))&#xff0c;返回 0.5。 4. 代码实战 首先我们在function包下创建math包&#xff0…

被他人错误解析域名到雷池 WAF网关的处理办法

作者&#xff1a;田逸 最近一些项目的站点经常发告警短信&#xff0c;提示网站无法访问。通过排查&#xff0c;发现后端数据库资源都被耗尽&#xff08;连接数上千&#xff0c;正常情况是小于100&#xff09;&#xff0c;负载也高得吓人&#xff0c;如下图所示。 “load averag…

照着这几步做,轻松搭建企业知识库

在当今信息爆炸的时代&#xff0c;企业面临着海量的知识和信息。如何高效地管理和利用这些知识成为了企业发展的关键。而搭建一个适合企业的知识库&#xff0c;可以帮助企业更好地组织和共享知识&#xff0c;提高工作效率和竞争力。下面将为大家介绍一些简单的步骤&#xff0c;…

Xshell 从github克隆项目:使用ssh方式。

接上文&#xff1a; https://blog.csdn.net/liu834189447/article/details/135247868 是能克隆项目了&#xff0c;但是速度太磕碜了&#xff0c;磕碜到难以直视。 找到另外一种办法&#xff0c;使用SSH克隆项目 速度嘎嘎猛。 首先得能进得去github网站&#xff0c;不能点上边…

Centos7:Jenkins+gitlab+node项目启动(1)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下&#xff1a; 动态图如下 uniapp的keyup获取不到keyCode和compositionstart&#xff0c;compositionend&#xff0c;所以需要监听input节点的keyup事件&#xff0c; 思路以及代码如下&#xff1a; 1.将每一个字符用文本框输入&#xff0c;代码如下 <view …