表格的合并

news2024/11/23 15:37:05

1.需要实现的效果

在这里插入图片描述
use-span-method.js文件

 * 合并相同数据，导出合并列所需的方法(只适合el-table)
 * @param {Object} data
 * @param {Object} rowSpanArray
 */
export function getRowSpanMethod(data, rowSpanArray) {

	/**
	 * 要合并列的数据
	 */
	const rowSpanNumObject = {};

	if(!rowSpanArray.length){
		return { rowspan: 1, colspan: 1 }
	}
	//初始化 rowSpanNumObject
	rowSpanArray.map(item => {
		rowSpanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);
		rowSpanNumObject[`${item}-index`] = 0;
        
	});
	//计算相关的合并信息
	for (let i = 1; i < data.length; i++) {
		console.log("----rowSpanArray---",rowSpanArray)
		rowSpanArray.map(key => {
			const index = rowSpanNumObject[`${key}-index`];
			if (data[i][key] === data[i - 1][key]) {
				rowSpanNumObject[key][index]++;
			} else {
				rowSpanNumObject[`${key}-index`] = i;
				rowSpanNumObject[key][i] = 1;
			}

		});
		rowSpanNumObject['operate']=JSON.parse(JSON.stringify(rowSpanNumObject[rowSpanArray[0]]));
		rowSpanNumObject['select']=JSON.parse(JSON.stringify(rowSpanNumObject[rowSpanArray[0]]));
		rowSpanNumObject['czr']=JSON.parse(JSON.stringify(rowSpanNumObject[rowSpanArray[0]]))
	}
  //  console.log(rowSpanNumObject)
	//提供合并的方法并导出
	//  row  columnIndex
	const spanMethod = function({ column, rowIndex }) {
		// console.log("row---",row);
		// console.log("columnIndex---",columnIndex)
		if (rowSpanArray.includes(column['property'])) {
			const rowspan = rowSpanNumObject[column['property']][rowIndex];
			if (rowspan > 0) {
				return { rowspan: rowspan, colspan: 1 }
			}
			return { rowspan: 0, colspan: 0 }
		}
		return { rowspan: 1, colspan: 1 }
	};

	return spanMethod;
}

在这里插入代码片

导入的文件的使用
在这里插入图片描述
导入的全部代码

<template>
        <div style="padding:20px;">
    <el-table :data="newArr" style="width: 100%" :span-method="spanMethod" stripe>
        <!--:span-method="objectSpanMethod"-->
        <el-table-column prop="xuhao" label="序号" width="60" />
      <el-table-column prop="projectName" label="项目名称" width="120" />
      <el-table-column prop="qlpSampleNumber" label="样品编号" />       
      <el-table-column prop="sampleNumber" label="委拖时间" />  
      <el-table-column prop="chargePeopleText" label="委拖联系人" />
      <el-table-column prop="sampleType" label="样品类型" />
      <el-table-column prop="sampleCount" label="样品总计" />

      <el-table-column label="检测项目" align="center" width="400">
        <el-table-column prop="factorName" label="因子名称" width="200" />
        <el-table-column prop="qsFactorValue" label="检测值" width="100"/>
        <el-table-column prop="qsFactorCount" label="指标量" width="100"/>        
      </el-table-column>
      <el-table-column prop="reportTypeText" label="报告类型" />
      <el-table-column prop="finishUserText" label="检测人员" />
      <el-table-column prop="finishStateText" label="完成状态" />
      <el-table-column prop="finishDate" label="完成日期" />
     
    </el-table>
<hr/>
<div class="table-box">
<el-table :data="tableDataArr" style="width: 100%"  stripe :span-method="arraySpanMethod" class="first-table">
        <!--:span-method="objectSpanMethod"-->
        <el-table-column type="index" label="序号" width="60" fixed/>
      <el-table-column prop="projectName" label="项目名称" width="120" fixed/>
      <el-table-column label="样品编号" width="160" class-name="childCell">
        <template #default="scope">
            <el-table :data="scope.row.plans" :show-header="false"  class="second-table" >
                <el-table-column prop="qlpSampleNumber" width="160"></el-table-column>
                <el-table-column prop="sampleNumber" label="委拖时间" width="200" />  
                <el-table-column prop="chargePeopleText" label="委拖联系人" width="200"/>
                <el-table-column prop="sampleType" label="样品类型" width="200"/>
                <el-table-column prop="sampleCount" label="样品总计" width="200"/>
                <el-table-column  label="检测项目" align="center" width="400"  class-name="childCell">                  
                    <template #default="scopeChild">
                        <div style="margin:0 -12px;">                     
                        <el-table :data="scopeChild.row.sampleDatas" :show-header="false" class="third-table" >
                            <el-table-column prop="factorName" label="因子名称" width="200"/>
                            <el-table-column prop="qsFactorValue" label="检测值" width="100"/>
                            <el-table-column prop="qsFactorCount" label="指标量" width="99"/>
                        </el-table>
                    </div>  
                    </template>
                  
                </el-table-column>
       <el-table-column prop="reportTypeText" label="报告类型" width="200"/>
      <el-table-column prop="finishUserText" label="检测人员" width="200"/>
      <el-table-column prop="finishStateText" label="完成状态" width="200"/>
      <el-table-column prop="finishDate" label="完成日期" width="199"/><!--少1px要不会出现滚动条-->

            </el-table>
    </template>
      </el-table-column>       
      <el-table-column  label="委拖时间" width="200"/>  
      <el-table-column  label="委拖联系人" width="200"/>
      <el-table-column  label="样品类型" width="200"/>
      <el-table-column  label="样品总计" width="200"/>

      <el-table-column label="检测项目" align="center" width="400">
        <el-table-column  label="因子名称" width="200" />
        <el-table-column  label="检测值" width="100"/>
        <el-table-column  label="指标量" width="100"/>        
      </el-table-column>
      <el-table-column  label="报告类型" width="200"/>
      <el-table-column  label="检测人员" width="200"/>
      <el-table-column  label="完成状态" width="200"/>
      <el-table-column  label="完成日期" width="200"/>
     
    </el-table>
</div>

    </div>
  </template>
  
  <script setup>
import {computed} from 'vue'
import { getRowSpanMethod } from './use-span-method.js' 
  const tableDataArr = [
  {
    "projectName": "0918项目",
    "plans": [
      {
        "qlpSampleNumber": "2023091801",
        "sampleName": "样品名称",
        "sampleNumber": "2023091801-001",
        "qtdDate": "2023-09-18T00:00:00",
        "sampleCount": 3,
        "sampleType": 434,
        "chargePeopleText": "张二",
        "finishDate": "2023-09-18T13:52:47",
        "finishStateText": "已完成",
        "finishUserText": "实验室操作员",
        "reportTypeText": "院分析测试中心",
        "sampleDatas": [
          {
            "qsFactorId": 241,
            "qsFactorValue": 5.6,
            "qsFactorCount": 6,
            "factorName": "五日生化需氧量 "
          },
          {
            "qsFactorId": 243,
            "qsFactorValue": 7.8,
            "qsFactorCount": 7,
            "factorName": "粪大肠菌群 "
          }
        ]
      },
      {
        "qlpSampleNumber": "2023091802",
        "sampleName": "河流样品1",
        "sampleNumber": "2023091802-001",
        "qtdDate": "2023-09-18T00:00:00",
        "sampleCount": 4,
        "sampleType": 466,
        "chargePeopleText": "张三",
        "finishDate": null,
        "finishStateText": "未完成",
        "finishUserText": "",
        "reportTypeText": "院分析测试中心",
        "sampleDatas": [
          {
            "qsFactorId": 241,
            "qsFactorValue":12,
            "qsFactorCount": 6,
            "factorName": "五日生化需氧量 "
          },
          {
            "qsFactorId": 243,
            "qsFactorValue":10,
            "qsFactorCount": 4,
            "factorName": "粪大肠菌群 "
          }
        ]
      },
      {
        "qlpSampleNumber": "2023091802",
        "sampleName": "沉积物样品名称",
        "sampleNumber": "2023091802-002",
        "qtdDate": "2023-09-18T00:00:00",
        "sampleCount": 2,
        "sampleType": 465,
        "chargePeopleText": "张三",
        "finishDate": null,
        "finishStateText": "未完成",
        "finishUserText": "",
        "reportTypeText": "院分析测试中心",
        "sampleDatas": [
          {
            "qsFactorId": 243,
            "qsFactorValue": 9,
            "qsFactorCount": 3,
            "factorName": "粪大肠菌群 "
          }
        ]
      }
    ]
  },
  {
    "projectName": "0915项目",
    "plans": [
      {
        "qlpSampleNumber": "2023091501",
        "sampleName": "样品名称2",
        "sampleNumber": "2023091501-001",
        "qtdDate": "2023-09-15T00:00:00",
        "sampleCount": 2,
        "sampleType": 434,
        "chargePeopleText": "张三",
        "finishDate": "2023-09-15T16:04:15",
        "finishStateText": "已完成",
        "finishUserText": "实验室操作员",
        "reportTypeText": "院分析测试中心",
        "sampleDatas": [{

            "qsFactorId": 243,
            "qsFactorValue": 8,
            "qsFactorCount": 3,
            "factorName": "粪大肠菌群2 "
          }
]
      }
    ]
  }
]

let numArr = []
tableDataArr.forEach((item,one)=>{
    item.plans.forEach((ite,two)=>{
        ite.sampleDatas.forEach((i,three)=>{
            numArr.push({
                factorName:i.factorName,
                qsFactorId: i.qsFactorId,
                qsFactorValue: i.qsFactorValue,
                qsFactorCount: i.qsFactorCount,
                one:one,
                two:two
               })
        })

    })
})
console.log(numArr)
  let newArr = numArr.map(item=>{
        return {
              projectName:tableDataArr[item.one].projectName,
              qlpSampleNumber:tableDataArr[item.one].plans[item.two].qlpSampleNumber,
              sampleName: tableDataArr[item.one].plans[item.two].sampleName,
              sampleNumber:tableDataArr[item.one].plans[item.two].sampleNumber,
              qtdDate: tableDataArr[item.one].plans[item.two].qtdDate,
              sampleCount:tableDataArr[item.one].plans[item.two].sampleCount,
              sampleType: tableDataArr[item.one].plans[item.two].sampleType,
              chargePeopleText: tableDataArr[item.one].plans[item.two].chargePeopleText,
              finishDate: tableDataArr[item.one].plans[item.two].finishDate,
              finishStateText: tableDataArr[item.one].plans[item.two].finishStateText,
              finishUserText:tableDataArr[item.one].plans[item.two].finishUserText,
              reportTypeText:tableDataArr[item.one].plans[item.two].reportTypeText,
              factorName:item.factorName ,
              qsFactorId: item.qsFactorId,
              qsFactorValue: item.qsFactorValue,
              qsFactorCount: item.qsFactorCount,
              xuhao:item.one+1 

        
        }
})
console.log(newArr)
const colspanArr=['xuhao','projectName', 'qlpSampleNumber','sampleNumber','chargePeopleText','sampleType','sampleCount','reportTypeText','finishUserText','finishStateText','finishDate']  //需要合并的列的prop
const spanMethod = computed(() => {
	return getRowSpanMethod(newArr, colspanArr)
	}) 

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  console.log(columnIndex)
  if(columnIndex>1){
    return [1,12]
  }
  
  
}
const arraySpanMethod1 = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if(columnIndex>5){
    return [1,3]
  }
  
}
  </script>
  <style lang="scss" scoped>
//  ::v-deep() .table-box .cell{
//     padding:0;
//   }
::v-deep() .first-table td[colspan="12"]>.cell{
   padding:0;   
  }
::v-deep().el-table td.childCell{border-bottom:0!important;border-right:0!important;}
::v-deep() .table-box .el-table__cell{padding:0;}
::v-deep() .table-box .el-table .el-table .el-table .cell{text-indent:0.5em;padding:8px 0;}
.second-table{box-sizing: border-box;border:0}
::v-deep() .second-table .el-table__inner-wrapper::before,::v-deep() .second-table .el-table__inner-wrapper::after{display:none}
::v-deep() .third-table:not(.el-table--border) .el-table__cell,::v-deep().second-table:not(.el-table--border) .el-table__cell{border-right:1px solid #eee;box-sizing: border-box;}
/* 表格不出现横向滚动条 */
::v-deep() .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>

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

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

相关文章

读取spring boot项目resource目录下的文件

读取spring boot项目resource目录下的文件

背景 项目开发过程中&#xff0c;有一些情况下将配置文件放在resource下能简化代码实现和部署时的打包步骤。例如&#xff1a; 项目中使用的数据库升级脚本、初始化脚本。将文件放到resource下&#xff0c;打包在jar包中&#xff0c;不能直接通过File路径读取。下面介绍两种读…
阅读更多...
论文降重方法同义词替换的实际应用与成效评估

论文降重方法同义词替换的实际应用与成效评估

大家好&#xff0c;今天来聊聊论文降重方法同义词替换的实际应用与成效评估&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 标题&#xff1a;论文降重方法同义词替换的实际…
阅读更多...
【文末送书】OpenCV4工业缺陷检测的六种方法

【文末送书】OpenCV4工业缺陷检测的六种方法

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…
阅读更多...
刷题第四十七天 583. 两个字符串删除操作 72. 编辑距离

刷题第四十七天 583. 两个字符串删除操作 72. 编辑距离

class Solution:def minDistance(self, word1: str, word2: str) -> int:# dp: 以i - 1结尾的word1和以j - 1结尾的word2相同需要的最小步数# if word1[i - 1] word2[j - 1]: dp[i][j] dp[i - 1][j - 1]# else: dp[i][j] min(dp[i - 1][j], dp[i][j - 1]) 1dp [[0] * (…
阅读更多...
postman脚本生成可执行文件（6）

postman脚本生成可执行文件（6）

一.通过Python脚本&#xff08;executescript.py&#xff09;执行newman指令 #!usr/bin/python import subprocess from datetime import datetimeclass Newman_automate():Newman_automate():该类主要是定义postman脚本执行__path:cmd命令行中执行newnan脚本指令&#xff08;…
阅读更多...
DataGrip 2023.3 新功能速递！

DataGrip 2023.3 新功能速递！

1 数据可视化 自 DataGrip 2023.3 发布以来&#xff0c;已整合 Lets-Plot 库&#xff0c;实现数据可视化。该可视化功能可用于所有三种类型的网格&#xff1a; 主选项卡&#xff1a;在打开表、视图或 CSV 文件时&#xff0c;在分割模式下显示图表。结果选项卡&#xff1a;在 服…
阅读更多...
OO AutoBackup 6: 自动备份同步文件工具箱软件

OO AutoBackup 6: 自动备份同步文件工具箱软件

保护您的数据&#xff0c;让备份变得轻松简单。 概述 O&O AutoBackup 6 是一款功能强大的自动备份同步文件工具箱软件。通过实时监控您的文件和文件夹&#xff0c;O&O AutoBackup 6 确保您的重要数据始终得到保护。无论您是在工作还是在家庭环境中&#xff0c;这款软…
阅读更多...
二叉树【数据结构】

二叉树【数据结构】

目录 二叉树1. 二叉树定义二叉树的存储定义 2. 遍历二叉树(1) 前序遍历(2) 中序遍历(3) 后序遍历(4) 层序遍历 3. 二叉树的相关操作(1) 二叉树的初始化(2) 二叉树的结点的手动创建(3) 二叉树结点的个数(4) 二叉树叶子结点的个数(5) 二叉树的高度(6) 第k层结点个数(7) 通过前序遍…
阅读更多...
Vue中父子Props传值不能修改的原因分析以及解决办法

Vue中父子Props传值不能修改的原因分析以及解决办法

Vue 官方文档中对于 Prop 的定义&#xff1a; Prop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 props 属性的时候&#xff0c;它就变成了那个组件实例的一个属性。为了给子组件传递数据&#xff0c;我们需要在该组件上使用 v-bind 指令绑定需要传递的数据。 由…
阅读更多...
【LeetCode刷题-树】-- 235.二叉搜索数的最近公共祖先

【LeetCode刷题-树】-- 235.二叉搜索数的最近公共祖先

235.二叉搜索数的最近公共祖先 方法&#xff1a;二次遍历 先遍历得到从根节点到p、根节点到q的路径&#xff0c;然后再遍历得到公共节点 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* Tr…
阅读更多...
ros2 学习04 工作空间说明及示例

ros2 学习04 工作空间说明及示例

ros2 术语说明&#xff1a; 大家在学习其他的开发语言之前的学习和开发中&#xff0c;应该有接触过某些集成开发环境&#xff0c;比如Visual Studio、Eclipse、Qt Creator等&#xff0c;当我们想要编写程序之前&#xff0c;都会在这些开发环境的工具栏中&#xff0c;点击一个“…
阅读更多...
UART协议——FPGA代码篇

UART协议——FPGA代码篇

一.串口&#xff08;UART&#xff09;协议简介 UART 串口通信有几个重要的参数&#xff0c;分别是波特率、起始位、数据位、停止位和奇偶检验位&#xff0c;对于两个使用UART 串口通信的端口&#xff0c;这些参数必须匹配&#xff0c;否则通 起始位&#xff1a;表示数据传输的开…
阅读更多...
ehr是什么意思？ehr系统主要干什么的

ehr是什么意思？ehr系统主要干什么的

随着科技的发展&#xff0c;企业管理方式也在不断变革。其中&#xff0c;ehr系统作为一种新兴的人力资源管理工具&#xff0c;受到了越来越多企业的关注。那么&#xff0c;ehr到底是什么意思&#xff1f;它是干什么的&#xff1f;主要能解决哪些企业痛点呢&#xff1f;接下来&a…
阅读更多...
App自动化:adb命令总结

App自动化:adb命令总结

App自动化:adb命令总结 1. 连接本地夜神模拟器2. 安装 apk 到模拟器上3. 启动软件4. 监控日志信息5. 模拟点击6. 滑动7. 输入文字8 修改电量信息9 重启android10 上传文件到模拟器、从模拟器拷贝文件到本地计算机 1. 连接本地夜神模拟器 需要在打开夜神模拟器的情况下&#xf…
阅读更多...
C语言-数组指针笔试题讲解(1)-干货满满！！！

C语言-数组指针笔试题讲解(1)-干货满满！！！

文章目录 ▶️1.sizeof和strlen的对比&#x1f4af;➡️1.1 sizeof是什么&#xff1f;&#x1f4af;➡️1.2sizeof用法举例&#x1f4af;▶️1.3strlen是什么&#xff1f;&#x1f4af;▶️1.4 strlen函数用法举例&#xff1a;&#x1f4af;▶️1.5 strlen和sizeof的对比&#…
阅读更多...
Axure

Axure

目录 一. 交互 1.2 交互事件 二. 情形 2.1 应用场景 三. 案例 3.1 ERP登录 3.2 ERP页面跳转 一. 交互 交互事件是指在用户界面中发生某些操作或行为时&#xff0c;触发相应的响应或动作。在设计网页、应用程序或其他用户界面时&#xff0c;交互事件通常用于实现交互式功…
阅读更多...
文件操作（下）

文件操作（下）

标题的顺序是接着之前写的&#xff0c;希望这篇博客对你有帮助 七. 随机读写函数 实际上&#xff0c;无论是读还是写&#xff0c;在一次调用顺序读写函数&#xff0c;文件指针会移到已经读过或者写过的下一个位置&#xff0c;从那个位置开始下一次读和写&#xff08;在文件没有…
阅读更多...
python排序算法，冒泡排序和快排

python排序算法，冒泡排序和快排

对于排序算法中比较知名的两个算法&#xff0c;分别就是冒泡排序和快速排序&#xff0c;在日常学习和使用中都会听到这两种排序算法的名称&#xff0c;这里主要介绍如何使用python来实现这两种排序算法。 冒泡排序的实现&#xff1a;一是从集合第一个元素开始&#xff0c;每两…
阅读更多...
Ansible：模块1

Ansible：模块1

Ansible&#xff1a; 远程操作主机功能 自动化运维&#xff08;playbook 剧本 yaml&#xff09; 是基于python开发的配置管理和应用部署工具。在自动化运维中&#xff0c;现在是一军突起。 Ansible能批量配置&#xff0c;部署&#xff0c;管理上千台主机。类似于xshell的一…
阅读更多...
2023ChatGPT浪潮，2024开源大语言模型会成王者？

2023ChatGPT浪潮，2024开源大语言模型会成王者？

《2023ChatGPT浪潮&#xff0c;2024开源大语言模型会成王者&#xff1f;》 一、2023年的回顾 1.1、背景 我们正迈向2023年的终点&#xff0c;回首这一年&#xff0c;技术行业的发展如同车轮滚滚。尽管互联网行业在最近几天基本上处于冬天&#xff0c;但在这一年间我们仍然经…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023