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…

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

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

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

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

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

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

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;第一步是去云处理。第…

【SQL Sever】3. 用户管理 / 权限管理

1. 创建登录名/用户/角色 在SQL Server中&#xff0c;创建用户通常涉及几个步骤。 首先&#xff0c;你需要创建一个登录名&#xff0c;然后你可以基于这个登录名在数据库中创建一个用户。 以下是如何做到这一点的步骤和相应的SQL语句&#xff1a; 创建登录名 首先&#xff0c…

Python零基础从小白打怪升级中~~~~~~~文件和文件夹的操作 (1)

第七节&#xff1a;文件和文件夹的操作 一、IO流&#xff08;Stream&#xff09; 通过“流”的形式允许计算机程序使用相同的方式来访问不同的输入/输出源。stream是从起源&#xff08;source&#xff09;到接收的&#xff08;sink&#xff09;的有序数据。我们这里把输入/输…

企业鸿蒙原生应用元服务备案实操基本材料要求

一、要提前准备的主要材料包括 域名&#xff0c;服务器&#xff0c;包名&#xff0c;公钥&#xff0c;MD5值&#xff0c;法人身份证正反两面&#xff0c;邮箱&#xff0c;手机号2个。 域名是备案过的&#xff0c;应为要求域名能打开&#xff0c;还要悬挂备案号。 操作时要提前沟…

目标检测——瓶装白酒疵品检测数据集

一、重要性及意义 瓶装白酒疵品检测在白酒生产过程中具有极其重要的地位&#xff0c;其重要性和意义主要体现在以下几个方面&#xff1a; 首先&#xff0c;瓶装白酒疵品检测是保障消费者权益的关键环节。白酒作为消费者日常饮用的酒类之一&#xff0c;其品质直接关系到消费者…

【电控笔记4】拉普拉斯-传递函数-pid

数据标幺化 拉普拉斯变换 欧拉公式 常见s变换 s变换性质 pid分析 p控制&#xff0c;存在稳态误差 可以求出p的取值范围p>-1&#xff0c;否则发散 pi消除稳态误差 把kp换成Gs 只用pi控制&#xff0c;不加微分的原因&#xff1a; 微分之后&#xff0c;噪声增大高频噪声频率…

【研发管理】产品经理知识体系-数字化战略

导读: 数字化战略对于企业的长期发展具有重要意义。实施数字化战略需要企业从多个方面进行数字化转型和优化&#xff0c;以提高效率和创新能力&#xff0c;并实现长期竞争力和增长。 目录 1、定义 2、数字化战略必要性 3、数字战略框架 4、数字化转型对产品和服务设计的影响…

卷积通用模型的剪枝、蒸馏---剪枝篇(此处以deeplabv3+为例,可根据模型自行定制剪枝层)

之后的两篇文章是对前段时间工作的一个总结。 一、环境配置 1.1、文章以b导的代码为模板,环境配置比较简单(第二篇蒸馏篇结束后会放置剪枝蒸馏配置好的百度网盘链接),其他算法自行配置,在剪枝之前,需要保证算法能够在本地跑通。 B导链接: https://github.com/bubbliiiin…

行云堡垒国密算法应用与信创支持

一、 国密算法和信创的介绍 1.1 什么是国密算法 国密算法是国家密码管理局制定颁布的一系列的密码标准&#xff0c;即已经被国家密码局认定的国产密码算法&#xff0c;又称商用密码&#xff08;是指能够实现商用密码算法的加密&#xff0c;解密和认证等功能的技术&#xff09;…

.NET邮箱API发送邮件的流程?如何使用API?

.NET邮箱API发送邮件需要哪些步骤&#xff1f;怎么配置API发信&#xff1f; 电子邮件已经成为我们日常工作和生活中不可或缺的一部分。对于开发人员来说&#xff0c;掌握如何使用API发送邮件是一项非常实用的技能。AokSend将详细介绍使用.NET邮箱API发送邮件的流程&#xff0c…

机器学习和深度学习 -- 李宏毅(笔记与个人理解1-6)

机器学习和深度学习教程 – 李宏毅&#xff08;笔记与个人理解&#xff09; day1 课程内容 什么是机器学习 找函数关键技术&#xff08;深度学习&#xff09; 函数 – 类神经网络来表示 &#xff1b;输入输出可以是 向量或者矩阵等如何找到函数&#xff1a; supervised Lear…

电感在 DC/DC 变换器中的作用及选型指南

消费类应用是现代 DC/DC 变换器需求的主要驱动力。在这类应用中&#xff0c;功率电感主要被用于电池供电设备、嵌入式计算&#xff0c;以及高功率、高频率的 DC/DC 变换器。了解电感的电气特性对于设计紧凑型、经济型、高效率、并具备出色散热性能的系统至关重要。 电感是一种…