vue a-table 实现指定字段相同数据合并行

vue a-table 实现相同数据合并行

  • 实现效果
  • 代码实现
    • cloums数据格式
    • 数据源格式
    • 合并代码

实现效果

在这里插入图片描述

代码实现

cloums数据格式

const getColumns = function () {return [{title: "分类",dataIndex: "checked",width: "150px",customRender: (text, row, index) => {return {children:"文字",//合并行的标题attrs: {// 合并行 含col字段则合并,其他的必须设置为0!!rowSpan: row.col ? row.col : 0,},};},},];
}

数据源格式

我们这里把相同的checked字段值进行合并

[{"id": "65d45","checked": "档案管理"},{"id": "65346","checked": "档案管理"},{"id": "6514d","checked": "动态监控"},{"id": "65d83","checked": "动态监控"}
]

合并代码

export const dealList = (arr) => {const list = arr.filter((item) => item.checked).map((item) => {return {...item,col: 0,};}).sort(function (a, b) {return (a.checked + "").localeCompare(b.checked + "");});// sort进行排序,方便计算const colList = [];arr.map((o) => {const arr = indexcount(list, o.checked);colList.push({col: arr.length,idex: arr[0],});});list.map((o, index) => {colList.map((m) => {if (index === m.idex) {o.col = m.col;}});});return list;
};
// 出现次数
function indexcount(arr, item) {var arr1 = [];for (var i = 0; i < arr.length; i++) {if (arr[i].checked == item) {arr1.push(i);}}return arr1;
}

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

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

相关文章

JMeter--9.录制脚本

录制步骤 1.新建线程组&#xff1a;测试计划->线程->线程组 测试计划下&#xff0c;至少要有1个线程组&#xff0c;因为在录制器中需要选择【目标控制器】 2. 新建录制器&#xff1a;测试计划->非测试原件->HTTP(S)测试脚本记录器&#xff08;HTTP代理服务器&…

【vue】vue2 和 vue3 的区别,响应式/性能提升/渲染函数/插槽

vue2/vue3 的对比 响应式原理 vue2 使用 definePropertyvue3 使用 proxyapi vue2 是选项式 options API 基于对象的方式&#xff0c;将组件的选项 data&#xff0c;methods 等作为组件实例属性代码逻辑比较复杂&#xff0c;难以维护data 必须是函数使用 mixin 复用相同逻辑 命…

Ansible自动化运维(四)jinja2 模板、Roles角色详解

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

PHP7.3 GD库报错imagecreatefromstring(): No JPEG support in this PHP build

最近在做docker容器的时候遇到了问题&#xff0c;安装的GD库没有JPEG支持&#xff0c;因为项目用到了绘图技术&#xff0c;这个支持必不可少。要解决这个问题也很简单&#xff1a; 安装jpeg支持&#xff0c;重新编译gd库&#xff0c;生成gd.so文件&#xff0c;重新加载gd库扩展…

Springboot+vue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的考务报名平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的考务报名平台&#xff0c;采用M&#xff08;model&#xff0…

vue2后台管理系统demo,包含增删查改、模糊搜索、分页

因一直敲小程序&#xff0c;vue不熟练&#xff0c;自己练手项目&#xff0c;就包含增删查改以及模糊搜索分页 一、页面简单但功能齐全 二、数据是mock模拟 三、启动步骤 1、 json-server --watch data.json 启动mock数据 2、npm i 下载依赖 3、npm run serve 四、github地址…

ETH网络中的账户

ETH网络中的账户 Externally owned accounts (EOA) - 外部账户 由用户控制&#xff0c;我们导入助记词创建的账户就属于此类账户。 Contract accounts (smart contracts) - 合约账户 合约账户由以太坊虚拟机执行的代码控制。它也被称为智能合约。合约帐户有相关的代码和数据存…

Redis的高性能之道

前言&#xff1a;做码农这么多年&#xff0c;我也读过很多开源软件或者框架的源码&#xff0c;在我看来&#xff0c;Redis是我看过写得最优美、最像一件艺术品的软件&#xff0c;正如Redis之父自己说的那样&#xff0c;他宁愿以一个糟糕的艺术家身份而不是一名好程序员被别人记…

python opencv比较图片相似度

目录 一:均值哈希算法 二:三直方图算法 三:单通道直方图 一:均值哈希算法 均值哈希算法是一种快速比较图像相似度的方法。它首先将图像转化为灰度图像,然后计算图像的均值,接着将每个像素的

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 &#x1f4d1;前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动&#x1f324;️总结 &#x1f4d1;前言 随着人工智能技术的蓬勃发展&#xff0c;AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中&#xff0c;OpenAI推出的首个AI视…

算法沉淀——动态规划之回文串问题(上)(leetcode真题剖析)

算法沉淀——动态规划之回文串问题 01.回文子串02.最长回文子串03.分割回文串 IV04.分割回文串 II05.最长回文子序列06.让字符串成为回文串的最少插入次数 01.回文子串 题目链接&#xff1a;https://leetcode.cn/problems/palindromic-substrings/ 给你一个字符串 s &#xf…

雾锁王国服务器官方配置要求说明

雾锁王国/Enshrouded服务器CPU内存配置如何选择&#xff1f;阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置&#xff0c;支持4人玩家畅玩&#xff0c;自带10M公网带宽&#xff0c;1个月90元&#xff0c;3个月271元&#xff0c;幻兽帕鲁服务器申请页面 https://t.aliyun.com…

C# TCP/IP协议

在C#中编写TCP/IP通信 //开启监听各个网络的连接是否成功 //开启服务端&#xff0c;监听&#xff0c;并且进入监听线程 try { IPAddress ip IPAddress.Parse(HostAddress); IPEndPoint ipe new IPEndPoint(ip, HostPort); m_services new Socket(Add…

深入JVM:解析OOM的三大场景,原因及实战解决方案

在Java应用程序开发中&#xff0c;OutOfMemoryError&#xff08;OOM&#xff09;是一个令人头痛的问题。当JVM中的内存无法满足应用程序的需求时&#xff0c;就会抛出这个错误。本文将深入探讨OOM的三大场景&#xff1a;堆内存溢出、方法区内存溢出和栈内存溢出&#xff0c;并分…

ChatGPT能替代什么人?

上一讲关于ChatGPT的热炒&#xff0c;其实对于我们来说算是敲了敲警钟。 其实在今天&#xff0c;关于ChatGPT&#xff0c;最多人关注的一个问题就是&#xff1a;ChatGPT能取代人吗&#xff0c;或者说能抢人的饭碗么吗&#xff1f; 有人说不能&#xff0c;也有人说能&#xff…

代码随想录算法训练营day30 || 332.重新安排行程(未完成),51. N皇后,37. 解数独(未完成)

这就是传说中的N皇后&#xff1f; 回溯算法安排&#xff01;| LeetCode&#xff1a;51.N皇后_哔哩哔哩_bilibili // 时间复杂度O(n^2) // 空间复杂度O(n^2)class Solution {List<List<String>> res new ArrayList<>();public List<List<String>>…

【机器人最短路径规划问题(栅格地图)】基于蚁群算法求解

基于蚁群算法求解机器人最短路径规划问题的仿真结果 仿真结果 收敛曲线变化趋势 蚁群算法求解最优解的机器人运动路径 各代蚂蚁求解机器人最短路径的运动轨迹

Java+SpringBoot+Vue:瑜伽馆管理的黄金组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

LeetCode 刷题 [C++] 第128题.最长连续序列

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 题目分析 对于数组中存在的连续序列&#xff0c;为了统计每个连续序列的…

CSS复合选择器(二)

CSS复合选择器&#xff08;二&#xff09; 伪类选择器一、动态伪类&#xff1a;二、结构伪类三、否定伪类&#xff1a;四、UI伪类&#xff1a;五、目标伪类&#xff08;了解&#xff09;六、语言伪类&#xff08;了解&#xff09; 伪类选择器 作用&#xff1a;选中特殊状态的元…