表格多列合并

小鱼儿 2023-01-11 01:09 29阅读 0赞

**要实现的效果 :** ![表格合并][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]  
**实现步骤解析：**

1.  通过第一列型别等级判断, 将序号列和第一列内容一致的分别合并
2.  过滤数据, 将每一个型别等级的数据存放到一个数组, 使各个型别等级之间合并时不互相影响
3.  通过第二列注册分公司判断, 将此列内容一致的合并
4.  再次过滤, 在同一个型别等级的基础上将每一个注册分公司的数据存放到一个数组, 使各个注册分公司之间合并时不互相影响
5.  同一个型别等级, 同一个注册分公司下, 通过第三列运行分公司判断, 将此列内容一致的合并(正常不会出现一致的, 若三者都一样则是一条数据, 此处只为展示过程)
6.  到此图片上合并结束

**具体实现过程：**

1、template 此处 sino-table 为封装 element-ui table 后的版本，具体属性可参照 element-ui

<template>
        <div>
          <sino-table
            :data="statisticData"
            :span-method="cellMerge"
            border
            :height="500"
            :cell-style="columnStyle"
            :header-cell-style="{backgroundColor:'#FAFCFF'}"
            @cell-click='goDetil'
            style="width: 100%; margin-top: 20px">
            <sino-table-column width="60" prop="indexSpan" label="序号" align="center"></sino-table-column>
            <sino-table-column width="120" prop="typeGrade" label="现飞型别等级" align="center"></sino-table-column>
            <sino-table-column width="150" prop="corpName" label="注册分公司" align="center"></sino-table-column>
            <sino-table-column width="150" prop="flyCorpName" label="运行分公司" align="center"></sino-table-column>
            <sino-table-column width="120" align="center" prop="SUM" label="带飞总人数" show-overflow-tooltip>
              <template scope="scope">
                <span class="count-num">{ { scope.row.SUM}}</span>
              </template>
            </sino-table-column>
            <sino-table-column width="80" align="center" prop="F1" label="F1" show-overflow-tooltip>
              <template scope="scope">
                <span class="count-num">{ { scope.row['F1']}}</span>
              </template>
            </sino-table-column>
            <sino-table-column width="80" align="center" prop="F2" label="F2" show-overflow-tooltip>
              <template scope="scope">
                <span class="count-num">{ { scope.row['F2']}}</span>
              </template>
            </sino-table-column>
          </sino-table>
        </div>
    </template>

2、script

<script>
      export default { 
        data () { 
          return { 
          	// 以假数据为例, 也可请求接口获取
            statisticData: [
              { 
              	typeGrade: "A-320", 
              	typeGradeName: "A-320", 
              	corpId: 74, 
              	corpName: "飞行总队",
                countMap: { F1: "2", F2: "0", SUM: "3"},
                flyCorpId: 4,
                flyCorpName: "西南分公司"
              },
              { 
              	typeGrade: "A-320", 
              	typeGradeName: "A-320", 
              	corpId: 74, 
              	corpName: "飞行总队",
                countMap: { F1: "0", F2: "0", SUM: "1"},
                flyCorpId: 5,
                flyCorpName: "浙江分公司"
              },
              { 
              	typeGrade: "A-320", 
              	typeGradeName: "A-320", 
              	corpId: 4, 
              	corpName: "上海分公司",
                countMap: { F1: "0", F2: "0", SUM: "1"},
                flyCorpId: 5,
                flyCorpName: "浙江分公司"
              },
              { 
              	typeGrade: "A-320", 
              	typeGradeName: "A-320", 
              	corpId: 4, 
              	corpName: "上海分公司",
                countMap: { F1: "0", F2: "0", SUM: "1"},
                flyCorpId: 5,
                flyCorpName: "浙江分公司"
              },
              { 
              	typeGrade: "A-330", 
              	typeGradeName: "A-330", 
              	corpId: 5, 
              	corpName: "浙江分公司", 
              	flyCorpId: 4,
                flyCorpName: "西南分公司",
                countMap: { F1: "0", F2: "0", SUM: "1"}
              },
              { 
              	typeGrade: "A-330", 
              	typeGradeName: "A-330", 
              	corpId: 74, 
              	corpName: "飞行总队",
                countMap: { F1: "1", F2: "0", SUM: "2"},
                flyCorpId: 4,
                flyCorpName: "西南分公司"
              }
            ]
          }
        },
        mounted () { 
          this.init();
        },
        methods: { 
          init () { 
    	      let data = [];
    	      this.statisticData.map((item, index) => { 
          	    // 处理数据,使countMap(SUM F1 F2)内容渲染到列表
    	        data.push({ 
    	          index,
    	          ...item,
    	          ...item.countMap
    	        });
    	      });
    	      // 合并typeGrade(第一列型别等级)内容一致的
    	      this.statisticData = this.mergeTableRow(data, ['index', 'typeGrade']);
    	      let typeArr = [];
    	      let corpArr = [];
    	      // 将第一列内容存放数组且去重
    	      this.statisticData.map(item => { 
    	        typeArr.push(item.typeGrade);
    	      });
    	      typeArr = Array.from(new Set(typeArr));
    	      // 循环表格数据
    	      this.statisticData.map(item => { 
    	      	// 循环第一列内容存放数组
    	        typeArr.map(it => { 
    	          // 过滤出每一大行的数据,使每行之后的数据不会互相影响
    	          let a = this.statisticData.filter(item => { 
    	            return item.typeGrade == it;
    	          });
    	          // 合并每大行corpName(第二列)内容一致的
    	          this.mergeTableRow(a, ['index', 'corpName']);
    	          // 继续之前的操作,基于a数组(每一大行的数据)对第三列进行判断合并,若有多列需要合并可一直执行下去,不建议过多以防性能不好
    	          // 将第二列内容存放数组且去重
    	          a.map(item => { 
    	            corpArr.push(item.corpId);
    	          });
    	          corpArr = Array.from(new Set(corpArr));
    	          // 循环表格每一大行数据
    	          a.map(item => { 
    	          	// 循环第二列内容存放数组
    	            corpArr.map(it => { 
    	              // 过滤出每一小行的数据
    	              let b = a.filter(item => { 
    	                return item.corpId == it;
    	              });
    	              // 合并每小行flyCorpName(第三列)内容一致的
    	              this.mergeTableRow(b, ['index', 'flyCorpName']);
    	            });
    	          });
    	        });
    	      });
          },
          // 合并内容相等的某一列(传入的merge)
          mergeTableRow (data, merge) { 
            if (!merge || merge.length === 0) { 
              return data;
            }
            merge.forEach((m) => { 
              const mList = { };
              data = data.map((v, index) => { 
                const rowVal = v[m];
                if (mList[rowVal]) { 
                  mList[rowVal]++;
                  data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++;
                  v[m + '-span'] = { 
                    rowspan: 0,
                    colspan: 0
                  };
                } else { 
                  mList[rowVal] = 1;
                  v[m + '-span'] = { 
                    rowspan: 1,
                    colspan: 1
                  };
                }
                return v;
              });
            });
            return data;
          },
          // 点击单元格
          goDetil (row, col, cell) { 
            if (row[col['property']]) { 
              let query = { 
                'column': col['property']
              };
              this.$emit('transmit', query); // 传递给父组件参数
            };
          },
          // 合并行或列
          cellMerge ({  row, column, rowIndex, columnIndex }) { 
            if (columnIndex == 0) { 
              let _row =  this.indexFilter(this.statisticData, 'typeGrade')[rowIndex];
              let _col = _row > 0 ? 1 : 0;
              const arr = this.indexFilter(this.statisticData, 'typeGrade');
              var Nosort = 0;
              for (let i in arr) { 
                if (arr[i] > 0) { 
                  Nosort += 1;
                };
                for (let j in this.statisticData) { 
                  if (i == j) { 
                    // indexSpan 为表格序号列
                    this.statisticData[i].indexSpan= Nosort;
                    this.statisticData[i].indexSpan == 0 ? this.statisticData[i].indexSpan= null : this.statisticData[i].indexSpan= Nosort; // 去掉序号0
                  }
                };
              };
              return [_row, _col];
            };
            const span = column['property'] + '-span';
            if (row[span]) { 
              return row[span];
            }
          },
          // 通过传入的type(除序号第一列)使序号列进行合并
          indexFilter (arr, type) { 
            var spanOneArr = [];
            var concatone = 0;
            arr.forEach((item, index) => { 
              if (index == 0) { 
                spanOneArr.push(1);
              } else { 
                if (item[type] == arr[index - 1][type]) { 
                  spanOneArr[concatone] += 1;
                  spanOneArr.push(0);
                } else { 
                  spanOneArr.push(1);
                  concatone = index;
                }
              }
            });
            return spanOneArr;
          },
          columnStyle ({  row, column, rowIndex, columnIndex }) { 
            if (columnIndex === 0) {    // 第1列的背景色就改变了
              return 'background:rgb(250, 252, 255);';
            }
          }
        }
      };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5cHpw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/499b2d47b61847ddb560dc295cc3d525.png

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 SQL多列合并成一列

一、拼接多列数据的基本概念在SQL中，拼接多个列数据成为一列数据是很常见的问题。要将多列合并成一列，在SQL语言中需要使用concat函数。concat函数可以将多个字

痛定思痛。/ 2024年03月17日 12:36/ 0 赞/ 81 阅读

相关 MySQL多列合并

`图一` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

忘是亡心i/ 2023年06月09日 14:29/ 0 赞/ 40 阅读

相关表格多列合并

要实现的效果 : ![表格合并][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

小鱼儿/ 2023年01月11日 01:09/ 0 赞/ 30 阅读

相关 sql查询一个字段多列值合并为一列sql 多列合并成一列查询多列合并一列，group by合并一列查询，多列数据

1、针对1对多，查询合并多列的情况场景解决方案： SELECT t.news_id, t.sentiment_label AS '情感', (

女爷i/ 2023年01月06日 11:44/ 0 赞/ 212 阅读

相关 View UI （iview）表格合并单元格（行/列合并）

> 有时我们在开发过程中会遇到表格里有合并单元格的需求。 > 今天以View UI （iview）组件库为例。 1. 打开[iview官网-table][iview_-t

约定不等于承诺〃/ 2022年10月14日 11:56/ 0 赞/ 489 阅读

相关合并表格第一列

最近老是遇见第一列是地市，第二列是区县。说一堆区县对应一个地市看起来不太好看，要把第一列的地市合并在一起。故写了个小小的Demo，留待以后复用。先看效果图，表一为原数据效果

深碍√TFBOYSˉ_/ 2022年08月05日 16:17/ 0 赞/ 261 阅读

相关 Antd表格之行/列合并

Antd--表格之行/列合并注意：antd官方行/列合并参考：[https://1x.ant.design/components/table/\components-t

左手的ㄟ右手/ 2022年03月12日 10:35/ 0 赞/ 1825 阅读

相关 excel一列多行数据合并、一行多列合并

一、一列多行数据合并 1.1 在B1单元格输入=A1:A6 ![在这里插入图片描述][20190328090307960.png] 1.2 然后按F9键 ![

Dear 丶/ 2022年02月27日 15:54/ 0 赞/ 1197 阅读

相关 HTML 表格中的行合并与列合并

`` colspan是横向合并；rowspan是纵向合并。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用

阳光穿透心脏的1/2处/ 2021年09月12日 07:54/ 0 赞/ 648 阅读

相关 html table 表格行合并列合并

目录 1.表格边框合并 2、行合并 3、列合并 -------------------- 表格：table 行：tr 列：td 属性：

客官°小女子只卖身不卖艺/ 2021年09月03日 10:48/ 0 赞/ 856 阅读