element动态表头合并表格

bash 复制代码
<template>
  <div>
   <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
        <el-table-column align="center" label="" prop="bigCategoryName" fixed></el-table-column>
        <el-table-column align="center" label="" prop="smallCategoryName" fixed></el-table-column>
        <el-table-column v-for="header in tableHeaders" align="center" :key="header.key" :prop="header.key"
            :label="header.label">
            <el-table-column v-show="header.children" v-for="child in header.children" align="center" :key="child.key"
            :prop="child.key" :label="child.label">
            <el-table-column v-show="child.children" v-for="child2 in child.newChildren" align="center"
                :label="child2.propName" :key="child2.key" :prop="child2.prop"></el-table-column>
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="">
            <el-table-column align="center" label="累计">
                <el-table-column align="center" label="本日"  prop="todayTotal" ></el-table-column>
                <el-table-column align="center" label="比率/出率" prop="rateTotal"  ></el-table-column>
                <el-table-column align="center" label="月累计" prop="monthTotalTotal"></el-table-column>
                <el-table-column align="center" label="月比率/出率" prop="monthRateTotal" ></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="上月比率/出率"  prop="lastMonthRateTotal" width="100px"></el-table-column>
        </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'table_test',
  data() {
    return {
      tableHeaders: [
          {
              "label": "孔令召",
              "children": [
                  {
                      "label": "白班",
                      "newChildren": [
                          {
                              "prop": "todayShift",
                              "propName": "本日",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "rateShift",
                              "propName": "比率/出率",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthTotalShift",
                              "propName": "月累计",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthRateShift",
                              "propName": "月比率/月出率",
                              "propDescribtion": null,
                              "hasSort": false
                          }
                      ]
                  }
              ]
          },
          {
              "label": "杨晓超",
              "children": [
                  {
                      "label": "中班",
                      "newChildren": [
                          {
                              "prop": "todayMiddle",
                              "propName": "本日",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "rateMiddle",
                              "propName": "比率/出率",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthTotalMiddle",
                              "propName": "月累计",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthRateMiddle",
                              "propName": "月比率/月出率",
                              "propDescribtion": null,
                              "hasSort": false
                          }
                      ]
                  }
              ]
          },
          {
              "label": "王文强",
              "children": [
                  {
                      "label": "夜班",
                      "newChildren": [
                          {
                              "prop": "todayNight",
                              "propName": "本日",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "rateNight",
                              "propName": "比率/出率",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthTotalNight",
                              "propName": "月累计",
                              "propDescribtion": null,
                              "hasSort": false
                          },
                          {
                              "prop": "monthRateNight",
                              "propName": "月比率/月出率",
                              "propDescribtion": null,
                              "hasSort": false
                          }
                      ]
                  }
              ]
          }
      ],
      tableData: [
         	{
                "bigCategoryName": "原料",
                "smallCategoryName": "投料量",
                "todayShift": 30340,
                "rateShift": 2150.0,
                "monthTotalShift": 45270.0,
                "monthRateShift": 2160.0,
                "todayMiddle": 32670,
                "rateMiddle": 2170.0,
                "monthTotalMiddle": 67550.0,
                "monthRateMiddle": 2170.0,
                "todayNight": 31700,
                "rateNight": 2190.0,
                "monthTotalNight": 67880.0,
                "monthRateNight": 2180.0,
                "todayTotal": 94710,
                "rateTotal": 2170.75,
                "monthTotalTotal": 180700,
                "monthRateTotal": 2170.05,
                "lastMonthRateTotal": 107.35
            },
            {
                "bigCategoryName": "辅料投入",
                "smallCategoryName": "辅料1",
                "todayShift": 70,
                "rateShift": 0.0,
                "monthTotalShift": 140.0,
                "monthRateShift": 0.01,
                "todayMiddle": 70,
                "rateMiddle": 0.0,
                "monthTotalMiddle": 140.0,
                "monthRateMiddle": 0.0,
                "todayNight": 70,
                "rateNight": 0.0,
                "monthTotalNight": 140.0,
                "monthRateNight": 0.0,
                "todayTotal": 210,
                "rateTotal": 4.81,
                "monthTotalTotal": 420,
                "monthRateTotal": 5.04,
                "lastMonthRateTotal": 144.27
            },
            {
                "bigCategoryName": "辅料投入",
                "smallCategoryName": "辅料2",
                "todayShift": 30,
                "rateShift": 0.0,
                "monthTotalShift": 60.0,
                "monthRateShift": 0.0,
                "todayMiddle": 30,
                "rateMiddle": 0.0,
                "monthTotalMiddle": 60.0,
                "monthRateMiddle": 0.0,
                "todayNight": 30,
                "rateNight": 0.0,
                "monthTotalNight": 60.0,
                "monthRateNight": 0.0,
                "todayTotal": 90,
                "rateTotal": 2.06,
                "monthTotalTotal": 180,
                "monthRateTotal": 2.16,
                "lastMonthRateTotal": 92.56
            },
            {
                "bigCategoryName": "辅料投入",
                "smallCategoryName": "辅料3",
                "todayShift": 2182.4,
                "rateShift": 160.0,
                "monthTotalShift": 3242.6,
                "monthRateShift": 0.16,
                "todayMiddle": 2335.85,
                "rateMiddle": 160.0,
                "monthTotalMiddle": 4817.4,
                "monthRateMiddle": 0.15,
                "todayNight": 2244.4,
                "rateNight": 160.0,
                "monthTotalNight": 4832.9,
                "monthRateNight": 0.16,
                "todayTotal": 6762.65,
                "rateTotal": 155,
                "monthTotalTotal": 12892.90,
                "monthRateTotal": 154.83,
                "lastMonthRateTotal": 126.1
            }
          ]
    }
  },
 
  mounted() {
  	this.gettableList()
  },
  methods: {
  	// 整体表格PC端合并列
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
         let that = this;
         // 因为日期在第一项,从0开始判断columnIndex === 0合并第一列
         if (columnIndex === 0) {
             // 当前行值及日期值为:bigCategoryName
             let idName = that.tableData[rowIndex].bigCategoryName;
             // rowIndex是行索引,判定第二行是不是和前面一行的日期值相同
             if (rowIndex > 0) {
             if (that.tableData[rowIndex].bigCategoryName != that.tableData[rowIndex - 1].bigCategoryName) {
                 let i = rowIndex;
                 let num = 0;
                 // 遍历
                 while (i < that.tableData.length) { 
                 if (that.tableData[i].bigCategoryName === idName) {
                     i++;
                     num++;
                 } else {
                     i = that.tableData.length;
                 }
                 }
                 return {
                 // 这里返回的num就是有相同的行数
                 rowspan: num,
                 // 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
                 colspan: 1,
                 }
             } else {
                 return {
                 rowspan: 0,
                 colspan: 1,
                 }
             }
             } else {
             let i = rowIndex;
             let num = 0;
             while (i < that.tableData.length) {
                 if (that.tableData[i].bigCategoryName === idName) {
                 i++;
                 num++;
                 } else {
                 i = that.tableData.length;
                 }
             }
             return {
                 rowspan: num,
                 colspan: 1,
             }
             }
         }
     },
    gettableList(){
        let data={
            date:this.time,
        }
        productionProcessPC(data).then((response) => {
            this.tableData=response.data.list
            this.tableHeaders=response.data.tableHeaders
        })
    },
};
</script>
<style lang='' scoped>
</style>
相关推荐
半盏茶香6 分钟前
在21世纪的我用C语言探寻世界本质 ——编译和链接(编译环境和运行环境)
c语言·开发语言·c++·算法
Evand J1 小时前
LOS/NLOS环境建模与三维TOA定位,MATLAB仿真程序,可自定义锚点数量和轨迹点长度
开发语言·matlab
LucianaiB1 小时前
探索CSDN博客数据:使用Python爬虫技术
开发语言·爬虫·python
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
Ronin3051 小时前
11.vector的介绍及模拟实现
开发语言·c++
计算机学长大白2 小时前
C中设计不允许继承的类的实现方法是什么?
c语言·开发语言
PieroPc3 小时前
Python 写的 智慧记 进销存 辅助 程序 导入导出 excel 可打印
开发语言·python·excel
2401_857439696 小时前
SSM 架构下 Vue 电脑测评系统:为电脑性能评估赋能
开发语言·php
SoraLuna6 小时前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
xlsw_6 小时前
java全栈day20--Web后端实战(Mybatis基础2)
java·开发语言·mybatis