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

news2024/11/20 11:35:43

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.coloradmin.cn/o/1478370.html

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

相关文章

外贸贸易术语FCA是什么?

在国际贸易实践中&#xff0c;FOB是最早应用于国际贸易的术语之一&#xff0c;一直以来都是使用比例最高的贸易术语。但近年来又一匹“黑马”脱颖而出——“FCA”术语。 01 概念和应用 《Incoterms2020》将11个贸易术语分为适用于任何运输方式或多种运输方式和适用于海运和内…

k8s部署 多master节点负载均衡以及集群高可用

一、k8s 添加多master节点实验 1、master02节点初始化操作 2、在master01节点基础上&#xff0c;完成master02节点部署 ①从master01节点复制所需要的文件 需要从master01节点复制etcd数据库所需要的ssl证书、kubernetes安装目录&#xff08;二进制文件、组件与apiserver通信…

面试官:谈一谈Cookie和Session的区别?

我先解释一下Cookie&#xff0c;它是客户端浏览器用来保存服务端数据的一种机制&#xff0c;当我们通过浏览器去进行网页访问的时候&#xff0c;服务器可以把一些状态数据以key-value的形式写入到Cookie里面&#xff0c;存储到客户端浏览器。下一次这个浏览器再访问服务器的时候…

DPU是什么?

问题描述&#xff1a; DPU是什么&#xff1f; 解答&#xff1a; DPU&#xff08;Data Processing Unit&#xff09;是以数据为中心构造的专用处理器&#xff0c;采用软件 定义技术路线支撑基础设施层资源虚拟化&#xff0c;支持存储、安全、服务质量管理等 基础设施层服务。…

【vmware安装群晖】

vmware安装群晖 vmware安装群辉&#xff1a; vmware版本&#xff1a;17pro 下载链接&#xff0c; https://customerconnect.vmware.com/cn/downloads/details?downloadGroupWKST-1751-WIN&productId1376&rPId116859 激活码可自行搜索 教程&#xff1a; https://b…

云时代【4】—— 资源隔离与控制技术

云时代【4】—— 资源隔离与控制技术 二、资源隔离与控制技术&#xff08;一&#xff09;NameSpace1. 基本介绍2. 相关 Linux 指令实战1&#xff1a;隔离进程实战2&#xff1a;隔离文件系统 &#xff08;二&#xff09;CGroups1. 基本介绍2. 相关 Linux 指令实战1&#xff1a;c…

sora技术报告阅读

sora是一个在可变持续时间、分辨率和宽高比的视频和图像上联合训练文本条件扩散模型。 需要将所有类型的视觉数据转化为统一表示的方法&#xff0c;使得能够对生成模型进行大规模训练。 Sora是一个通用的视觉数据模型&#xff0c;它可以生成不同持续时间、宽高比和分辨率的视…

ctfshow——反序列化

文章目录 web 254——啥也没web 255——反序列化对变量进行赋值&#xff08;1&#xff09;web 256——反序列化对变量进行赋值&#xff08;2&#xff09;web 257——对象注入web 258——对象注入(绕过preg_match)web 259 web 254——啥也没 这里就是使用GET传输&#xff0c;use…

小程序中使用echarts地图

一、下载并安装echarts 1、下载echarts-for-weixin组件 echarts-for-weixin项目提供了一个小程序组件&#xff0c;用这种方式可以在小程序中方便地使用 ECharts。 下载ec-canvas项目&#xff08;下载地址&#xff09; ​​ 注意&#xff1a;下载的 ec-canvas 中的echarts的版本…

k8s.gcr.io/pause:3.2镜像丢失解决

文章目录 前言错误信息临时解决推荐解决onetwo 前言 使用Kubernetes&#xff08;k8s&#xff09;时遇到了镜像拉取的问题&#xff0c;导致Pod沙盒创建失败。错误显示在尝试从k8s.gcr.io拉取pause:3.2镜像时遇到了超时问题&#xff0c;这通常是因为网络问题或者镜像仓库服务器的…

【Go-Zero】测试API查询信息无法返回数据库信息与api、rpc文件编写规范

【Go-Zero】测试API查询信息无法返回数据库信息与api、rpc文件编写规范 大家好 我是寸铁&#x1f44a; 总结了一篇测试API查询信息无法返回数据库信息与api、rpc文件编写规范的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 问题背景 大家好&#xff0c;我是寸铁&#xff01…

TypeScript 中类的理解及应用场景

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…

应用多元统计分析--多元数据的直观表示(R语言)

例1.2 为了研究全国31个省、市、自治区2018年城镇居民生活消费的分布规律&#xff0c;根据调查资料做区域消费类型划分。 指标&#xff1a; 食品x1&#xff1a;人均食品支出(元/人) 衣着x2&#xff1a;人均衣着商品支出(元/人) 居住x3&#xff1a;人均居住支出(元/人) 生活x4…

map和set的简单介绍

由于博主的能力有限&#xff0c;所以为了方便大家对于map和set的学习&#xff0c;我放一个官方的map和set的链接供大家参考&#xff1a; https://cplusplus.com/ 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器&#xff0c;比如&#xff1a;vector、list、deque&#x…

【AI+应用】怎么快速制作一个类chatGPT套壳网站

最近有人问我&#xff0c; 看了我之前写的一篇文章 [人工智能] AI浪潮下Sora对于普通人的机会 &#xff0c; 怎么做一个类chatGPT的套壳网站&#xff0c;是从0开始做么。 对于普通人来说&#xff0c;万事不懂先AI&#xff0c; AI找不到答案搜索google或百度。对于程序员来说…

GIT 拉取代码报错error:some local refs could not be updated

文章目录 报错信息处理办法在这里插入图片描述小结 报错信息 ![new branch] dev->orgin/dev(unable to update local ref) error:some local refs could not be updated;try running git remote prune orginto remove any old,confilicting branches 处理办法 git gc --pru…

【免费】两阶段鲁棒优化matlab实现——CCG和benders

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序采用matlab复现经典论文《Solving two-stage robust optimization problems using a column-and-constraint generation method》算例&#xff0c;实现了C&CG和benders算法两部分内容&#xff0c;通过…

android开发与实战,那些年Android面试官常问的知识点

前言 在做android项目开发时&#xff0c;大家都知道如果程序出错了&#xff0c;会弹出来一个强制退出的弹 出框&#xff0c;这个本身没什么问题&#xff0c;但是这个UI实在是太丑了&#xff0c;别说用户接受不了&#xff0c;就连 我们自己本身可能都接受不了。虽然我们在发布程…

水豚鼠标助手 强大的鼠标美化工具

水豚鼠标助手 水豚鼠标助手是一款 鼠标换肤、屏幕画笔、放大镜、聚光灯、屏幕放大、倒计时功能的强大屏幕演示工具。 软件助手获取 水豚鼠标助手1.0.0 安装教程 第一步&#xff1a;下载后&#xff0c;双击软件安装包 第二步&#xff1a;Windows可能会出现提示弹窗&#xff…

使用Docker部署Nacos集群和Nginx高可用负载(9节点集群部署)

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容部署Nacos集群Nginx高可用负载 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专…