antdesign 1.7.8 vue2 table实现列合并

无分页,需要根据mac列进行列合并,最终效果如下所示:

核心实现如下:

// 核心代码
const getRowspan = (dataScroce, filed) => {let spanArr = [];let position = 0;dataScroce.forEach((item, index) => {if (index === 0) {spanArr.push(1);position = 0;} else {//需要合并的地方判断if (dataScroce[index][filed] === dataScroce[index - 1][filed]) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = index;}}});return spanArr
};
// vue dom
<a-table:loading="loading"rowKey="id"bordered:style="{ minHeight: '345px' }":scroll="{ y: 290}":columns="netColumns":data-source="netList":pagination="false"><span slot="online" slot-scope="text, record"><span v-if="record.online == 0"> 离线 </span><span v-if="record.online == 1"> 在线 </span></span></a-table>
// data
netColumns: [{title: 'mac',dataIndex: 'mac',ellipsis: true,align: 'center',customRender: (value, row, index) => {return{children: value,attrs: {rowSpan:row.rowSpan},};},},{title: 'ip',dataIndex: 'ipv4',ellipsis: true,align: 'center',},{title: this.$t('asset.asset.online-status'),dataIndex: 'online',ellipsis: true,align: 'center',width:90,scopedSlots: { customRender: 'online' },},{title: this.$t('asset.asset.update-time'),dataIndex: 'updateAt',ellipsis: true,align: 'center',},],
// datasource
this.netList = responses.data.map((item,index)=>{return {...item,rowSpan:getRowspan(responses.data,'mac')[index]}})

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

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

相关文章

金三银四面试题(十九):MySQL中的锁

在MySQL中&#xff0c;锁是非常重要的&#xff0c;特别是在多用户并发访问数据库的环境中&#xff0c;因此也是面试中常问的话题。 请说说数据库的锁&#xff1f; 关于MySQL 的锁机制&#xff0c;可能会问很多问题&#xff0c;不过这也得看面试官在这方面的知识储备。 MySQL …

深入了解Redis——持久化

一&#xff0c;Redis持久化 Redis持久化即将内存中的数据持久化到磁盘中&#xff0c;在下一次重启后还能进行使用&#xff0c;Redis持久化分为RDB和AOF两种&#xff0c;我们接下来分别介绍RDB和AOF的内部原理和区别 RDB Redis运行时会将当前的内存快照存入至磁盘中&#xff…

./build/examples/openpose/openpose.bin在windows中调用

直接看这个更简单的方法&#xff1a;https://blog.csdn.net/weixin_45615730/article/details/137591825?spm1001.2014.3001.5501 问题描述&#xff1a; 在跑pifuhd&#xff0c;需要两个输入&#xff0c;一个图片&#xff0c;一个关键点json文件。这是人家给的例子&#xff0…

【Linux】tcpdump P1 - 网络过滤选项

文章目录 选项 -D选项 -c X选项 -n选项 -s端口捕获 port选项 -w总结 tcpdump 实用程序用于捕获和分析网络流量。系统管理员可以使用它来查看实时流量或将输出保存到文件中稍后分析。本文将演示在日常使用 tcpdump时可能想要使用的几种常见选项。 选项 -D 使用-D 选项的 tcpdu…

中文域名有必要注册吗?

随着互联网的普及和全球化&#xff0c;中文域名作为一种新兴的网络标识&#xff0c;逐渐进入了公众的视野。中文域名&#xff0c;顾名思义&#xff0c;是以中文字符为主要组成部分的域名&#xff0c;它允许用户直接使用中文来访问网站&#xff0c;而不需要记忆或输入一串英文字…

并发基础面试题第一篇

1.为什么要使用并发编程 提升多核CPU的利用率&#xff1a;一般来说一台主机上会有多个cpu核心&#xff0c;我们可以创建多个线程&#xff0c;理论上讲操作系统可以将多个线程分配给不同的CPU执行&#xff0c;每个CPU执行一个线程&#xff0c;这样就提高了CPU的使用效率。 简单…

怎么开发一个预约小程序_一键预约新体验

预约小程序&#xff0c;让生活更便捷——轻松掌握未来&#xff0c;一键预约新体验 在快节奏的现代生活中&#xff0c;我们总是在不断地奔波&#xff0c;为了工作、为了生活&#xff0c;不停地忙碌着。然而&#xff0c;在这繁忙的生活中&#xff0c;我们是否曾想过如何更加高效…

邮件群发提高成功率的技巧?如何群发邮件?

邮件群发有哪些注意事项&#xff1f;怎么有效分析邮件群发效果&#xff1f; 邮件群发已经成为一种高效的信息传递手段。然而&#xff0c;很多人发现&#xff0c;尽管发送了大量的邮件&#xff0c;但回应率却并不理想。那么&#xff0c;如何才能在邮件群发中提高成功率呢&#…

【flutter启动分析】

flutter启动分析的入口: void main() {runApp(const MyApp()); } main函数会调用runapp(); void runApp(Widget app) { //生成对象给下面两个领域 //Flutter Framework ---调用到---胶水对象---》Flutter 的C++ Engine(so库这种)final WidgetsBinding binding = WidgetsF…

Oracle小机利用ZFS实现在线存储迁移

1.ZFS介绍 2004年&#xff1a;Sun Microsystems 开始研发 ZFS 文件系统。ZFS 最初是作为 Solaris 操作系统的一部分而开发的&#xff0c;旨在解决传统文件系统的一些限制和问题。 2010年&#xff1a;Oracle 收购了 Sun 公司&#xff0c;从而获得了 ZFS 文件系统的所有权和控制权…

node 中的 nextTick 和 vue 中的 nextTick 的区别

node 中的 nextTick node 中的 nextTick 是 node 自带全局的变量 process 的一个方法&#xff0c;process.nextTick 是一个微任务&#xff0c;在 node 的所有微任务中最先执行&#xff0c;是优先级最高的微任务。浏览器中是没有这一个方法的。 vue 中的 nextTick vue 中的 n…

只为兴趣,2024年你该学什么编程?

讲动人的故事,写懂人的代码 当你想学编程但不是特别关心找工作的时候,选哪种语言学完全取决于你自己的目标、兴趣和能找到的学习资料。一个很重要的点,别只学一种语言啊!毕竟,"门门都懂,样样皆通",每种编程语言都有自己的优点和适合的用途,多学几种可以让你的…

鸿蒙开发 一 (二)、熟悉鸿蒙之剑 ArkTS

ArkTS是HarmonyOS主要应用开发语言&#xff0c;以后也别在弄那个 java 和鸿蒙的混合版了&#xff0c; 没必要浪费时间&#xff0c; 一步到位&#xff0c; 学新的吧。 简介 ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;保…

网络工程师(强化训练)-网络互联与互联网

网络工程师 以下关于OSPF路由协议的描述中&#xff0c;错误的是向整个网络中每一个路由器发送链路代价信息。相比于TCP&#xff0c;UDP的优势为开销较小。以太网可以传送最大的TCP段为1480字节。IP数据报经过MTU较小的网络时需要分片。假设一个大小为1500字节的报文分为2个较小…

【如何应用OpenCV对图像进行二值化】

使用OpenCV进行图像二值化是一个常见的图像处理任务。以下是一个简单的步骤说明&#xff0c;以及相应的Python代码示例。 步骤说明&#xff1a; 读取图像&#xff1a;首先&#xff0c;使用OpenCV的imread函数读取图像。灰度化&#xff1a;将彩色图像转换为灰度图像&#xff0…

LeetCode 1702.修改后的最大二进制字符串:脑筋急转弯(构造,贪心)

【LetMeFly】1702.修改后的最大二进制字符串&#xff1a;脑筋急转弯&#xff08;构造&#xff0c;贪心&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/maximum-binary-string-after-change/ 给你一个二进制字符串 binary &#xff0c;它仅有 0 或者 1 组…

Day 20 654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

最大二叉树 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下&#xff1a; 二叉树的根是数组中的最大元素。左子树是通过数组中最大值左边部分构造出的最大二叉树。右子树是通过数组中最大值右边部分构造出的最大二叉树。 通过给定的数组构建最大二叉…

【鸿蒙千帆起】《开心消消乐》完成鸿蒙原生应用开发,创新多端联动用户体验

《开心消消乐》已经完成鸿蒙原生应用开发&#xff0c;乐元素成为率先完成鸿蒙原生应用开发的20游戏厂商之一。作为一款经典游戏&#xff0c;《开心消消乐》已经拥有8亿玩家&#xff0c;加入鸿蒙原生应用生态&#xff0c;将为其带来更优的游戏性能和更多创新体验。自9月25日华为…

中国500米分辨率月最大EVI数据集

增强型植被指数&#xff08;EVI&#xff09;是在归一化植被指数&#xff08;NDVI&#xff09;改善出来的&#xff0c;根据大气校正所包含的影像因子大气分子、气溶胶、薄云、水汽和臭氧等因素进行全面的大气校正&#xff0c;EVI大气校正分三步&#xff0c;第一步是去云处理。第…

结构体和结构体指针的区别

1.定义区别 结构体的定义如下&#xff1a; struct 结构体名 {数据类型 成员变量名1;数据类型 成员变量名2;// 可以有更多的成员变量 };例如&#xff0c;定义一个表示学生的结构体&#xff1a; struct Student {int id;char name[20];int age; };上述定义了一个名为Student的…