vue2+antd实现表格合并;excel效果

效果图

在这里插入图片描述

一、html

<template>
  <div>
    <a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered>
      
        <template slot="content1" slot-scope="text">
          {{text}}
        </template> </a-table>
  </div>
</template>

二、js

export default {

  data () {
   
    return {
      sortLevel: ['date'],
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          key: 'date',
          customRender: this.dateRender,

        },
        {
          title: '内容',
          colSpan: 2,
          dataIndex: 'content',
           scopedSlots: { customRender: 'content1' },
       
        },
        {
          title: '内容',
          colSpan: 0,
          dataIndex: 'content2',
          // customRender: renderContent,
        },
    
      ],
      datas: [
        {
          id: 1,
          content: '123',
          content2: 'qqw',
          date: '周一'

        },
        {
          id: 2,
          content: '123',
          content2: 'qwqw',

          date: '周二'

        },
        {
          id: 3,
          content: '123',
          content2: 'wewe',

          date: '周一'

        },
        ,
        {
          id: 42,
          content: '12332',
          content2: 'sad',

          date: '周三'

        },
        ,
        {
          id: 52,
          content: '1223',
          content2: 'asdasd',

          date: '周一'

        }
      ],
      dataSource: []
    }
  },
  mounted () {
    this.dataSource = this.convertData(this.datas)
    console.log('   this.dataSource : ', this.dataSource);
  },
  methods: {
    dateRender (value, row, index) {
      return {
        children: value,
        attrs: {
          rowSpan: row.dateRowSpan
        },
      };
    },
    // 获取需要合并数据的rowSpan
    convertData (arr, levelIndex = 0) {
      const levelKey = this.sortLevel
      const key = levelKey[levelIndex]

      // 根据不同维度重新整合数据
      let groupObj = this.groupBy(arr, key) || {};
      Object.keys(groupObj).forEach(groupKey => {
        if (levelIndex < levelKey.length - 1) {
          groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)
        }
        // 计算rowSpan
        groupObj[groupKey].forEach((item, index, arr) => {
          item[`${key}RowSpan`] = index === 0 ? arr.length : 0
        })
      })

      return Object.values(groupObj).flat()
    },
    // 根据属性分组
    groupBy (arr = [], key) {
      let obj = {}
      arr.forEach(item => {
        const val = item[key]
        if (!obj[val]) {
          obj[val] = []
        }
        obj[val].push(item)
      })

      return obj
    },
  },
}

三、完整代码

<template>
  <div>
    <a-table :columns="columns" :dataSource="dataSource" rowKey="id" :pagination="false" bordered>
      </a-table>
  </div>
</template>

<script>


export default {

  data () {

    const renderContent = (value, row, index) => {
      const obj = {
        children: value,
        attrs: {},
      };
      if (index === 3) {
        obj.attrs.colSpan = 0;
      }
      return obj;
    };
    return {
      sortLevel: ['date'],
      columns: [
        {
          title: '日期',
          align: 'center',
          dataIndex: 'date',
          key: 'date',
          customRender: this.dateRender,

        },
        {
          title: '内容',
          colSpan: 2,
          dataIndex: 'content',
        
        },
        {
          title: '内容',
          colSpan: 0,
          dataIndex: 'content2',
          // customRender: renderContent,
        },
    
      ],
      datas: [
        {
          id: 1,
          content: '123',
          content2: 'qqw',
          date: '周一'

        },
        {
          id: 2,
          content: '123',
          content2: 'qwqw',

          date: '周二'

        },
        {
          id: 3,
          content: '123',
          content2: 'wewe',

          date: '周一'

        },
        ,
        {
          id: 42,
          content: '12332',
          content2: 'sad',

          date: '周三'

        },
        ,
        {
          id: 52,
          content: '1223',
          content2: 'asdasd',

          date: '周一'

        }
      ],
      dataSource: []
    }
  },
  mounted () {
    this.dataSource = this.convertData(this.datas)
    console.log('   this.dataSource : ', this.dataSource);
  },
  methods: {
    dateRender (value, row, index) {
      return {
        children: value,
        attrs: {
          rowSpan: row.dateRowSpan
        },
      };
    },
    // 获取需要合并数据的rowSpan
    convertData (arr, levelIndex = 0) {
      const levelKey = this.sortLevel
      const key = levelKey[levelIndex]

      // 根据不同维度重新整合数据
      let groupObj = this.groupBy(arr, key) || {};
      Object.keys(groupObj).forEach(groupKey => {
        if (levelIndex < levelKey.length - 1) {
          groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)
        }
        // 计算rowSpan
        groupObj[groupKey].forEach((item, index, arr) => {
          item[`${key}RowSpan`] = index === 0 ? arr.length : 0
        })
      })

      return Object.values(groupObj).flat()
    },
    // 根据属性分组
    groupBy (arr = [], key) {
      let obj = {}
      arr.forEach(item => {
        const val = item[key]
        if (!obj[val]) {
          obj[val] = []
        }
        obj[val].push(item)
      })

      return obj
    },
  },
}
</script>
<style lang="less" scoped></style>```

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

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

相关文章

单臂路由组网实验,单臂路由的定义、适用情况、作用

一、定义 单臂路由是指通过在路由器的一个接口上配置许多子接口,从而实现原来相互隔离的不同VLAN之间的互通。 子接口:把路由器上的实际的物理接口划分为多个逻辑上的接口,这些被划分的逻辑接口就是子接口。 二、适用情况 用在没有三层交换机,却要实现不同VLAN之间的互…

element ui中el-form-item的属性rules的用法

目录 el-form-item的属性rules的用法 栗子 总结 实践应用 一、 定义静态的校验规则 二、定义动态的校验规则 el-form-item的属性rules的用法 在学习element ui 的Form表单组件时&#xff0c;学到el-form-item也有rules属性&#xff0c;但是对应这个属性如何使用&#x…

【linux】服务器安装及卸载pycharm社区版教程

【linux】服务器安装及卸载pycharm社区版教程 【创作不易&#xff0c;求点赞关注收藏】 文章目录 【linux】服务器安装及卸载pycharm社区版教程1、到官网下载安装包2、通过终端wget下载安装包3、解压4、安装5、设置环境变量6、运行pycharm7、删除pycharm安装包、卸载pycharm …

前端JS特效第34集:jQuery俩张图片局部放大预览插件

jQuery俩张图片局部放大预览插件&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Co…

大数据环境下的房地产数据分析与预测研究的设计与实现

1绪论 1.1研究背景及意义 随着经济的快速发展和城市化进程的推进&#xff0c;房地产市场成为了国民经济的重要组成部分。在中国&#xff0c;房地产行业对经济增长、就业创造和资本投资起到了重要的支撑作用。作为中国西南地区的重要城市&#xff0c;昆明的房地产市场也备受关…

新版本 idea 创建不了 spring boot 2 【没有jkd8选项】

创建新项目 将地址换成如下 https://start.aliyun.com/

VmWare虚拟机开启wordpress服务并通过服务器内网穿透访问

目录 Ubuntu安装LAMP环境Ubuntu安装wordpress内网穿透服务端客户端 部分问题记录浏览器访问8000端口始终重定向到80端口修改站点url后wordpress无法登陆 曾经在阿里云的服务器上开了个wordpress服务作为个人博客&#xff0c;后来因为域名和服务器续费变贵没有继续续费&#xff…

【螺旋矩阵 II】python刷题记录

本来想着根据上一篇文章中大佬的思路来顺时针转转来改代码&#xff0c;想了一天没搞出来 http://t.csdnimg.cn/7sM8g 于是看了代码随想录的视频 一入循环深似海 | LeetCode&#xff1a;59.螺旋矩阵II_哔哩哔哩_bilibili 总结一下&#xff1a; 模拟的思路&#xff0c;每一圈…

解读|http和https的区别,谁更好用

在日常我们浏览网页时&#xff0c;有些网站会看到www前面是http&#xff0c;有些是https&#xff0c;这两种有什么区别呢&#xff1f;为什么单单多了“s”&#xff0c;会有人说这个网页会更安全些&#xff1f; HTTP&#xff08;超文本传输协议&#xff09;和HTTPS&#xff08;…

筑牢安全防线,促进企业稳定成长

注重技术创新与产业升级&#xff0c;还要高度重视安全管理与可持续发展&#xff0c;才能确保产业园区内企业能够在安全、稳定的环境中持续成长&#xff0c;并为社会和环境做出贡献。 强化安全管理 1、智能化安保系统&#xff1a; 园区采用智能化管理系统&#xff0c;实现对物…

顶顶通呼叫中心中间件-被叫路由、目的地绑定(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-被叫路由、目的地绑定(mod_cti基于FreeSWITCH) 1、配置分机 点击分机 -> 找到你需要设置的分机 ->呼叫路由设置为external&#xff0c;这里需要设置的分机是呼叫的并不是坐席的分机呼叫路由 2、配置拨号方案 点击拨号方案 -> 输入目的地绑定 …

(02)Unity使用在线AI大模型(调用Python)

目录 一、概要 二、改造Python代码 三、制作Unity场景 一、概要 查看本文需完成&#xff08;01&#xff09;Unity使用在线AI大模型&#xff08;使用百度千帆服务&#xff09;的阅读和实操&#xff0c;本文档接入指南的基础上使用Unity C#调用百度千帆大模型&#xff0c;需要…

部署指南

部署指南 https://support.huawei.com/enterprise/zh/doc/EDOC1100368575/e64f745b 总体原则 园区网络作为网络基础设施&#xff0c;为用户提供网络通信服务和访问资源权限&#xff0c;其复杂多样的访问关系以及多种多样的业务类型必然要求园区网的设计要有良好的 设计原则。…

Ubuntu22 Qt6.6 ROS 环境搭建

Ubuntu22.04; Qt6.6; Qt Creator 13.01; ROS2 1. 安装 Qt ROS 插件 1.下载地址&#xff1a; https://github.com/ros-industrial/ros_qtc_plugin/releases 选择对应 Qt Creator 版本的安装包。 2. Qt Creator中&#xff0c;“Help - 关于插件”–>“install Plugin…

Docker容器——初识Docker,安装以及了解操作命令

一、Docker是什么? 是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源&#xff0c;用来管理容器和镜像的工具是在Linux容器里驱动运行应用的开源工具是一种轻量级的“虚拟机” 基于linux内核运行Docker的容器技术可以在一台主机上轻松为任何应用…

Win10+Docker配置TensorRT环境

1.Docker下载和安装 Docker下载:Install Docker Desktop on Windows Docker安装: 勾选直接下一步就行,安装完成后需要电脑重启。 重启后,选择Accept—>Continue without signing in—>skip survey. 可以进入下面页面,并且左下角是绿色的,显示e…

可视化作品集(14)智慧旅游和智慧景区,洞悉一切。

智慧旅游和智慧景区的可视化大屏可以带来以下几个方面的好处&#xff1a; 1. 提升游客体验&#xff1a; 通过可视化大屏&#xff0c;游客可以方便地获取到景区地图、交通信息、景点介绍、活动安排等信息&#xff0c;帮助游客更好地规划行程&#xff0c;提升游览体验。 2. 提供…

信创学习笔记(四),信创之数据库DB思维导图

创作不易 只因热爱!! 热衷分享&#xff0c;一起成长! “你的鼓励就是我努力付出的动力” 一. 信创学习回顾 1.信创内容 信创内容思维导图 2.信创之CPU芯片架构 信创之CPU芯片架构思维导图 3.信创之操作系统OS 信创之操作系统OS思维导图 二. 信创之国产数据库DB思维导图 …

【PG】PostgreSQL高可用之repmgr事件通知

目录 描述 结合脚本 占位符 repmgr命令 生成的事件&#xff1a; repmgrd 生成的事件&#xff08;流复制模式&#xff09;&#xff1a; 描述 每次repmgr或repmgrd执行重大事件时&#xff0c;都会将该事件的记录连同时间戳、失败或成功的标识以及进一步的详细信息&#xff08…

CentOS 7 网络配置

如想了解请查看 虚拟机安装CentOS7 第一步&#xff1a;查看虚拟机网络编辑器、查看NAT设置 &#xff08;子网ID&#xff0c;网关IP&#xff09; 第二步&#xff1a;配置VMnet8 IP与DNS 注意事项&#xff1a;子网掩码与默认网关与 第一步 保持一致 第三步&#xff1a;网络配置…