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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

有哪些视频媒体?邀请视频媒体报道活动的好处

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 视频媒体在当今的媒体生态中占据了重要的地位。以下是一些主要的视频媒体类型&#xff1a; 电视台&#xff1a;如中央电视台、各省级卫视台、地方电视台等&#xff0c;他们拥有专业的视…

mac命令行下计算文件SHA-256散列值

源起 从国内的第三方网站下载了Android sutiod的zip包下载地址&#xff0c;为了安全起见还是得跟Android官网上的对应的zip包的SHA值做下对比。以前是经常使用md5命令的&#xff0c;所以理论在命令行下应该是有对应的命令行工具可以计算SHA值的。后来搜索到可以用 shasum命令来…

yolov8训练目标检测模型

1.环境安装 conda安装&#xff08;miniconda&#xff09;&#xff0c;配置环境变量 创建环境 conda create -n yolo python3.8安装ultralytics conda activate yolopip install ultralytics2.数据集标注 使用labelimg标注工具对图片进行标注&#xff1a;将标注产生的xml转为t…

表格图片太大怎么批量压缩?快速处理图片大小的方法

在工作或者学习中制作表格的时候&#xff0c;经常需要插入一些图片来修饰内容&#xff0c;当遇到图片太大无法导入的情况就比较麻烦&#xff0c;尤其是多张图片处理的时候&#xff0c;那么表格图片太大怎么批量压缩呢&#xff1f;接下来小编就分享给大家一个快速图片压缩的方法…

HTTP详解(HTTP的特点,状态码,工作原理,GET和POST的区别,如何解决无状态通信)!!!

文章目录 一、HTTP协议简介二、HTTP的主要特点三、HTTP之URL四、Request和Respons五、HTTP的状态码六、HTTP工作原理七、GET和POST请求的区别八、解决HTTP无状态通信——Cookie和Session 一、HTTP协议简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&…

92. 递归实现指数型枚举 刷题笔记

思路 dfs 考虑选或者不选每个位置 用0表示未考虑 1表示选 2表示不选 用u表示搜索状态 u>n时 已经搜到底层了 需要输出当前方案 遍历 如果选了则输出 #include<iostream> using namespace std; int n; const int N16; int st[N]; void dfs(int u){ //u来记…

JVM运行时数据区——程序计数器

1、程序计数器介绍 JVM中的程序计数器英文全称是Program Counter Register&#xff0c;其中Register的命名源于CPU的寄存器&#xff0c;寄存器用于存储指令相关的现场信息&#xff0c;CPU只有把数据装载到寄存器才能够运行。 程序计数器中的寄存器并非是广义上所指的物理寄存…

音频提取使用什么方法?视频提取音频

在数字技术与多媒体日益普及的今天&#xff0c;音频提取已成为一个常见且重要的任务。无论是为了制作视频、编辑音乐&#xff0c;还是进行语音识别和分析&#xff0c;我们都需要从原始材料中提取音频。那么&#xff0c;音频提取通常使用什么方法呢&#xff1f; 1. 使用专业的音…

vue-router4 (六) 路由嵌套

应用场景&#xff1a; ①比如京东页面的首页、购物车、我的按钮&#xff0c;可以点击切换到对应的页面&#xff1b; ② 比如 Ant Design左侧这些按钮点击就会切到对应的页面&#xff0c;此时可以把左侧按钮放在父路由中&#xff0c;右侧的子路由 1.路由配置&#xff0c;子路由…

NLP-词向量、Word2vec

Word2vec Skip-gram算法的核心部分 我们做什么来计算一个词在中心词的上下文中出现的概率&#xff1f; 似然函数 词已知&#xff0c;它的上下文单词的概率 相乘。 然后所有中心词的这个相乘数 再全部相乘&#xff0c;希望得到最大。 目标函数&#xff08;代价函数&#xff0…

web学习笔记(二十二)DOM开始

目录 1.DOM简介 2.DOM树 3.DOM节点 4.查找DOM节点方法汇总 5.查找子结点的属性 5.1父子关系 5.2兄弟关系 6.几个特殊元素的查找 1.DOM简介 DOM&#xff08;Document Object Model&#xff09; 也叫页面文档对象模型&#xff0c;是W3C组织推荐的处理可扩展标记语言(HTML…

年度目标制定:数据驱动的深度策略,打造你的成功蓝图!

导语&#xff1a;在快节奏的生活中&#xff0c;制定年度目标不仅仅是为了完成任务&#xff0c;更是为了在一年中明确方向、聚焦重点、持续进步。而数据分析&#xff0c;则是我们制定年度目标时不可或缺的利器。通过深入挖掘数据&#xff0c;我们可以更准确地理解自己的需求、优…

数据中台的演进与实践——构建企业的数字核心_光点科技

数据中台&#xff0c;一个在近年来被频繁提及的概念&#xff0c;已经成为众多企业数字化转型的核心组成部分。然而&#xff0c;尽管它的重要性被业界广泛认可&#xff0c;对于数据中台的深入理解和有效实践仍然是许多企业面临的挑战。在本文中&#xff0c;我们将从数据中台的演…

在线原型工具有哪些比较好用?

随着云计算和5G网络的发展&#xff0c;互联网办公工具的发展 Web 这是一个不可避免的趋势。那么&#xff0c;对于产品设计团队来说&#xff0c;哪些在线设计工具值得体验呢&#xff1f;今天&#xff0c;让我们来看看一些国内外经典的在线原型工具。 即时设计 - 可实时协作的专…

React入门之react_jsx入门

简单语法写法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><script s…

yolov5v7v8目标检测增加计数功能--免费源码

在yolo系列中&#xff0c;很多网友都反馈过想要在目标检测的图片上&#xff0c;显示计数功能。其实官方已经实现了这个功能&#xff0c;只不过没有把相关的参数写到图片上。所以微智启软件工作室出一篇教程&#xff0c;教大家如何把计数的参数打印到图片上。 一、yolov5目标检测…

EAP-TLS实验之Ubuntu20.04环境搭建配置(FreeRADIUS3.0)(四)

该篇主要介绍了利用配置ca.cnf、server.cnf、client.cnf在certs路径下生成证书文件&#xff08;非执行bootstrap脚本&#xff0c;网上也有很多直接通过openssl命令方式生成的文章&#xff09;&#xff0c;主要参考&#xff08;概括中心思想&#xff09;官方手册&#xff0c;以及…

Android Kotlin协程实战

你能听懂的Kotlin协程课&#xff0c;跟老司机学&#xff0c;不用自己瞎折腾 认识协程 协程难在哪儿? Ja v a中不曾出现的&#xff0c;新概念概念不清晰&#xff0c;我们看到的大都是不同语言对于协程的实现或者衍生Kotlin 基础不扎实多线程编程基础太薄弱 协程是什么? 协…

快速搭建网站原型!8款网站原型软件推荐

现在&#xff0c;基于云的软件已经逐渐成为主流&#xff0c;网站原型设计工具也不例外。与桌面版本相比&#xff0c;在线原型工具具有独特的优势&#xff0c;无论您使用Linux&#xff0c;Mac 或者Windows&#xff0c;都不需要安装就可以使用这些工具。下面小编就为大家推荐8款非…

全面整理!机器学习常用的回归预测模型

Datawhale干货 作者&#xff1a;曾浩龙&#xff0c;Datawhale意向成员 前言 回归预测建模的核心是学习输入 到输出 &#xff08;其中 是连续值向量&#xff09;的映射关系。条件期望 是 到 的回归函数。简单来说&#xff0c;就是将样本的特征矩阵映射到样本标签空间。 图…