el-table合并单元格

1. 代码

<template><div><el-table border :span-method="arraySpanMethod" :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: "2",name: "虎",address: "上海市普518 弄"},{date: "2",name: "虎",address: "上海陀区金沙江路7 弄"},{date: "2",name: "王",address: "上9 弄"},{date: "3",name: "王",address: "上海市普陀区金沙江路 1516 "},{date: "5",name: "王小",address: "陀区金沙江路 1518 弄"},{date: "4",name: "王小",address: "上海市517 弄"},{date: "2",name: "小虎",address: "上海市普陀区金沙路 1519 弄"},{date: "2",name: "小虎",address: "上海市普陀江路 1516 弄"}]};},created() {this.mergeYear(this.tableData);},methods: {mergeYear(arr) {let tempArr = [1],index = 0;arr.reduce((acc, cur, _index, _arr) => {if (acc.date !== cur.date) {tempArr[_index] = 1;index = _index;} else {tempArr[index]++;}return cur;});arr.forEach((ele, index) => {ele.rowspan = tempArr[index] || 0;});},arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {return {rowspan: row.rowspan,colspan: 1};}}}
};
</script>

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

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

相关文章

无线电音频-BPA600蓝牙协议分析仪名词解析

1 介绍 2 Baseband基带分析 (1)Delta 是什么含义? "Delta" 有多个含义,取决于上下文。以下是常见的几种含义: 希腊字母:Delta&#x

Linux(centos7)下安装mariadb10详解

MariaDB 和 MySQL 之间存在紧密的关系。 起源&#xff1a;MariaDB 最初是作为 MySQL 的一个分支而创建的。它的初始目标是保持与 MySQL 的兼容性&#xff0c;并提供额外的功能和性能改进。 共同的代码基础&#xff1a;MariaDB 使用了 MySQL 的代码基础&#xff0c;并在此基础上…

Docker 常用命令

docker命令大全 命令说明docker attach将本地标准输入、输出和错误流附加到正在运行的容器docker build从 Dockerfile 构建镜像docker builder管理构建docker checkpoint管理检查点docker commit从容器的更改中创建新图像docker config管理 Docker 配置docker container管理容器…

HTML <menuitem> 标签

实例 包含不同 <menuitem> 元素的上下文菜单: <menu type="context" id="mymenu"><menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"></menuitem><men…

【机器学习】特征工程 - 文本特征提取TfidfVectorizer

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 文本特征提取 一、特征提取API二、提取特征三、转成数组四、特征名字五、转回原始数…

如何清除视频和照片中水印的几种方式

文章目录 如何清除视频和照片中水印的几种方式一、清除视频中水印的几种方式1、截除水印区域2、模糊水印区域3、使用人工智能技术工具3.1 通过【iMyFone-MarkGo[^1]】消除水印3.2 通过【嗨格式视频转换器[^2]】消除水印3.3 通过【PR 视频编辑器】消除水印3.4 通过 【美图秀秀】…

TensorFlow和PyTorch各有哪些优缺点呢?入门学习该如何选择呢?

TensorFlow和PyTorch是两个广泛应用于深度学习的开源框架&#xff0c;它们各自具有一些优点和缺点。下面是它们的主要特点&#xff1a; TensorFlow的优点&#xff1a; 高度灵活&#xff1a;TensorFlow提供了更底层的操作和控制&#xff0c;可以对模型的细节进行更精确的调整和…

微服务系列文章之 Nginx负载均衡

1、七层负载均衡 1、说明 Nginx要实现七层负载均衡需要用到proxy_pass代理模块配置。Nginx默认安装支持这个模块&#xff0c;我们不需要再做任何处理。Nginx的负载均衡是在Nginx的反向代理基础上把用户的请求根据指定的算法分发到一组【upstream虚拟服务池】。 2、要用到的指…

【Linux】网络基础之UDP协议

目录 &#x1f308;前言&#x1f338;1、传输层&#x1f33a;2、重谈端口号&#x1f368;2.1、端口号范围划分&#x1f367;2.2、认识知名端口号 &#x1f340;3、UDP协议&#x1f368;3.1、UDP协议报文结构&#x1f369;3.2、UDP协议的特点&#x1f36a;3.3、基于UDP的应用层协…

openwrt 阿里云盘webdav 转成 samba4挂载

需要rclone 与samba4-server rclone 吧webdav挂载到openwrt的某个目录下。 然后通过samba-server 挂载出去。 安装rclone sudo -v ; curl https://rclone.org/install.sh | sudo bash 安装fuse opkg install fuse-utils 软连接 ln -s /usr/bin/fusermount /usr/bin/fuse…

【Kubernetes运维篇】RBAC之创建集群用户管理K8S

文章目录 一、创建zhangsan集群用户赋予uat名称空间管理员权限二、创建lisi集群用户赋予查看所有名称Pod权限 需求&#xff1a;公司新入职两位运维同事&#xff0c;分别是zhangsan、lisi&#xff0c;刚入职肯定不能给K8S管理员权限&#xff0c;所以需要创建两个系统账号&#x…

k8s与集群管理

从docker讲起 终于有人把 Docker 讲清楚了&#xff0c;万字详解&#xff01; Docker资源&#xff08;CPU/内存/磁盘IO/GPU&#xff09;限制与分配指南 默认情况下&#xff0c;Docker容器是没有资源限制的&#xff0c;它会尽可能地使用宿主机能够分配给它的资源。如果不对容器资…

chinese_lite OCR使用教程

目录 一、简介二、环境三、项目地址四、使用说明五、各语言的Demo地址六、效果展示 一、简介 超轻量级中文ocr&#xff0c;支持竖排文字识别, 支持ncnn、mnn、tnn推理 ( dbnet(1.8M) crnn(2.5M) anglenet(378KB)) 总模型仅4.7M 二、环境 python3.6linux/macos/windows 三…

JVM回收算法(标记-清除算法, 复制算法, 标记-整理算法)

1.标记-清除算法 最基础的算法&#xff0c;分为两个阶段&#xff0c;“标记”和“清除” 原理&#xff1a; - 标记阶段&#xff1a;collector从mutator根对象开始进行遍历&#xff0c;对从mutator根对象可以访问到的对象都打上一个标识&#xff0c;一般是在对象的header中&am…

自动化测试框架性能测试报告模板

目录 一、项目概述 二、测试环境说明 三、测试方案 四、测试结果 五、结果分析 总结&#xff1a; 一、项目概述 1.1 编写目的 本次测试报告&#xff0c;为自动化测试框架性能测试总结报告。目的在于总结我们课程所压测的目标系统的性能点、优化历史和可优化方向。 1.2 …

AUTOSAR CP标准的RTE和BSW各模块的设计及开发工作

AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;是一种开放的汽车电子系统架构标准&#xff0c;旨在提供一种统一的软件架构&#xff0c;以实现汽车电子系统的模块化和可重用性。 AUTOSAR标准中的两个重要模块是RTE&#xff08;Runtime Environment&…

【AI底层逻辑】——篇章5(上):机器学习算法之回归分类

目录 引入 一、何为机器学习 1、定规则和学规则 2、算法的定义 二、机器学习算法 1、常见学习方法 2、回归 3、分类 续下篇... 往期精彩&#xff1a; 引入 计算机发明初&#xff0c;专家通过将专业知识和经验梳理成规则输入计算机程序&#xff0c;但是这样跟不上知识…

【运维工程师学习五】数据库之MariaDB

【运维工程师学习五】数据库 1、常用的关系型数据库2、C/S结构3、MariaDB图形客户端4、安装MariaDB5、启动MariaDB及验证启动是否成功6、验证启动——端口7、验证启动——进程8、MariaDB配置文件路径主配置文件解读&#xff1a; 9、MariaDB的配置选项10、MariaDB客户端连接1、在…

设计模式 ~ 单例模式

单例模式 单例模式是一种设计模式&#xff0c;指在确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例&#xff1b; 前端对于单例模式不常用&#xff0c;但是单例的思想无处不在&#xff1b; 创建之后缓存以便继续使用&#xff1b; 如&#xff1a;弹窗、遮罩…

【Python】json 格式转换 ( json 模块使用 | 列表转 json | json 转列表 | 字典转 json | json 转字典 )

文章目录 一、json 格式转换1、json 模块使用2、代码示例分析 - 列表转 json3、代码示例分析 - 字典转 json json 格式 字符串 与 Python 中的 字典 dict 和 列表 list 变量 可以无缝转换 ; 调用 json.dumps 函数 可以将 Python 列表 / 字典 转为 json ;调用 json.loads 函数 …