表格的合并

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>