Elemui表单合并

news2024/11/28 14:48:00

原代码形式

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
       tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小龙',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-03',
        name: '王小马',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小海',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小冰',
        address: '上海市普陀区金沙江路 1516 弄'
      }
      ]
      }
    }
  }
</script>

在这里插入图片描述

合并为一行

解读:
要将相同日期的数据合并为一行,您可以使用计算属性(computed property)来处理数据。在计算属性中,您可以对tableData进行分组,并对每个日期进行聚合操作。下面是一个修改过的代码示例:

<template>
  <el-table
    :data="mergedTableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小龙',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-03',
        name: '王小马',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小海',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小冰',
        address: '上海市普陀区金沙江路 1516 弄'
      }
      ]
    }
  },
  computed: {
    mergedTableData() {
      const mergedData = {};
      this.tableData.forEach((item) => {
        if (mergedData[item.date]) {
          mergedData[item.date].push(item);
        } else {
          mergedData[item.date] = [item];
        }
      });

      const result = [];
      for (const date in mergedData) {
        if (Object.prototype.hasOwnProperty.call(mergedData, date)) {
          const mergedItem = {
            date,
            name: mergedData[date][0].name,
            address: mergedData[date].map((item) => item.address).join(', ')
          };
          result.push(mergedItem);
        }
      }

      return result;
    }
  }
}
</script>

在上面的代码中,我们添加了一个计算属性mergedTableData,它对tableData进行遍历并构建了一个新的合并后的数据数组result。对于每个日期,我们将相同日期的数据合并到一个数组中,然后通过mapjoin方法将地址合并为一个字符串。最后,我们通过返回result来更新el-table的数据。

注意:在这个示例中,我们假设日期是唯一的,没有重复的日期数据。如果有重复的日期,请根据实际情况进行修改。

这样就可以将相同日期的数据合并为一行在el-table中显示了。

在这里插入图片描述

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

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

相关文章

Qt6 Qt Quick UI原型学习QML第五篇

文章目录 效果QML语法父文件 MyQML.qmlQML语法子文件 TLineEditV1.qmlQML语法子文件 TTextEdit.qml 效果 QML语法父文件 MyQML.qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 600height: 600title:…

【043】解密C++ STL:深入理解并使用 list 容器

解密C STL&#xff1a;深入理解并使用list容器 引言一、list 容器概述二、list容器常用的API2.1、构造函数2.2、数据元素插入和删除操作2.3、大小操作2.4、赋值操作2.5、数据的存取2.6、list容器的反转和排序 三、使用示例总结 引言 &#x1f4a1; 作者简介&#xff1a;一个热爱…

详细解析python视频选择--【思维导图知识范围】

C ,JAVA JAVAWEB ,微信小程序等 都有视频选择的分析。 语言视频选择收录专辑链接C张雪峰推荐选择了计算机专业之后-在大学期间卷起来-【大学生活篇】JAVA黑马B站视频JAVA部分的知识范围、学习步骤详解JAVAWEB黑马B站视频JAVAWEB部分的知识范围、学习步骤详解SpringBootSpringB…

Linux QT通过NFS挂载到Linux开发板上

Linux QT通过NFS挂载到Linux开发板上 说明&#xff1a;这里使用的Linux开发板是正点原子的阿尔法开发板 创建NFS 环境 NFS简介 网络文件系统&#xff0c;英文 Network File System(NFS)&#xff0c;是由 SUN 公司研制的 UNIX 表示层协议 (presentation layer protocol)&…

机器学习术语解析与应用(二)

文章目录 &#x1f340;目标函数&#xff08;Objective Function&#xff09;&#x1f340;GPU加速&#xff08;GPU Acceleration&#xff09;&#x1f340;迁移学习&#xff08;Transfer Learning&#xff09;&#x1f340;自然语言处理&#xff08;Natural Language Processi…

opencv 之 外接多边形(矩形、圆、三角形、椭圆、多边形)使用详解

opencv 之 外接多边形&#xff08;矩形、圆、三角形、椭圆、多边形&#xff09;使用详解 本文主要讲述opencv中的外接多边形的使用&#xff1a; 多边形近似外接矩形、最小外接矩形最小外接圆外接三角形椭圆拟合凸包 将重点讲述最小外接矩形的使用 1. API介绍 #多边形近似 v…

EasyUI Datagrid 应用

两种为 datagrid 赋值表格 number 1 <div class"easyui-layout" data-options"fit:true"><div data-options"region:center"><table id"storeTable" class"easyui-datagrid" style"width:100%;height:…

STM32(HAL库)驱动(2.0寸)TFT-LCD彩屏(240*320)

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 屏幕引脚配置 2.3 项目生成 3、KEIL端程序整合 3.1 LCD驱动添加 3.2 函数修改 3.2.1 lcd.h修改 3.2.2 lcd_innit.h 修改 3.2.3 lcd.c修改 3.2.4 lcd_inut.c修改 3.3 主函数代码 3.3…

重新思考半监督医学图像分割:方差减少的视角

文章目录 Rethinking Semi-Supervised Medical Image Segmentation: A Variance-Reduction Perspective摘要本文方法实验结果 Rethinking Semi-Supervised Medical Image Segmentation: A Variance-Reduction Perspective 摘要 在医学图像分割中&#xff0c;对比学习是通过对…

Flink简介及部署模式

文章目录 1、Flink简介2、Flink部署2.1 本地模式2.1 Standalone模式部署2.2 Standalone模式下的高可用2.3 Yarn模式Yarn模式的高可用配置&#xff1a;yarn模式中三种子模式的区别&#xff1a; 3、并行度4、提交命令执行指定任务Application Mode VS yarn per-job 5、注意事项5、…

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。

1.1 创建css文件&#xff0c;用于编辑style 注意&#xff1a; 1.背景颜色用ppt的取色器来获取&#xff1a; 先点击ppt的形状轮廓&#xff0c;然后点击取色器&#xff0c;吸颜色&#xff0c;然后再点击形状轮廓的其他轮廓颜色&#xff0c;即可获取到对应颜色。 2.表格间的灰色线…

二,创建支付微服务提供者 第二章

<dependencies><!--web--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--监控--><dependency><groupId>org.springframewor…

微信小程序瀑布流组件

1.创建文件夹 /components/waterfall/ 文件夹结构如图 各文件内容&#xff1a; .wxml<view class"waterfallView"><view wx:for"{{resultData}}" wx:for-item"i" wx:for-index"iIndex" wx:key"iIndex" class&…

Idea 设置类和方法的注释(获取参数)

Idea 添加注释&#xff1a;类注释、方法注释 类注释 方法注释 类注释 File–Setting–Editor–File and Code Templates–Class: 注释模板&#xff1a; /** **description: *author: fqtang*time: ${DATE} ${TIME}* */ 操作截图&#xff1a; 效果&#xff1a; 方法注释 为了…

06.计算机网络——IP协议

文章目录 网络层IP协议基本概念协议头格式如何解包如何交付网段划分子网掩码特殊的IP地址IP地址的数量限制私有IP地址和公网IP地址路由 网络层 IP协议 IP协议提供一种将数据从A主机送达到B主机的能力&#xff0c;进行网络层的通信。 ​ IP协议 基本概念 主机 —— 配有IP地址…

HTML Audio对象属性、方法、事件及音乐播放器应用

分为两部分&#xff0c;前面主要介绍Html5为Audio对象提供了用于DOM操作的方法、属性和事件&#xff1b; 后面主要通过使用audio jquery bootstrap在浏览器底部实现的音乐播放器。 效果&#xff1a; 目录 Audio对象 常用方法 常用属性 常用事件 音乐播放器 Html页面 样式…

C进阶:内存操作函数

内存操作函数 memcpy 头文件&#xff1a;string.h 基本用途&#xff1a;进行不相关&#xff08;不重叠的内存&#xff09;拷贝。 函数原型&#xff1a;void* memcpy(void* destination,//指向目标数据的指针 const void* source,//指向被拷贝数据的指针 size_t num);//拷贝的数…

ES6解构对象、数组、函数传参

目录 1.对象解构 2.对象解构的细节处理 2.1.解构的值对象中不存在时 2.2.给予解构值默认参数 2.3.非同名属性解构 3.数组解构 3.1基础解构语法 3.2数组嵌套解构 4.函数解构传参 5.解构小练习 在ES6的新语法中新增了解构的方法&#xff0c;它可以让我们很方便的从数组或…

如何实现两个对象之间的属性拷贝

两个对象之间的属性拷贝 你可以使用Java的BeanUtils类或类似工具来实现两个对象之间的属性拷贝。以下是一个示例代码&#xff1a; import org.apache.commons.beanutils.BeanUtils;public class CopyPropertiesExample {public static void main(String[] args) throws Excep…

java学习路程之篇一、进阶知识、面向对象高级、static关键字、继承、final关键字、this、super

文章目录 面向对象高级static关键字继承final关键字 面向对象高级 static关键字 继承 final关键字