el-table纵向合并单元格

考自下列文章

https://blog.csdn.net/u013558749/article/details/82257168 (element-ui 实现行合并)
https://www.cnblogs.com/guwufeiyang/p/12850088.html	(合并后样式的处理)

目标样式

合并后样式

来源数据

获取到后台返回的数据再经过前端处理
注意 [processId] [dimensionTag] 是参与合并的关键字段

[
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "重点-测试",
        "dimensionTag": "1499255834195238914重点-测试",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 0
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834195238914日常-测试",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 1
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834195238914日常-测试",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 2
    },
    {
        "processId": "1499255834195238914",
        "currentProcessInfoId": "1499255834245570561",
        "flowType": "01",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "01",
        "dimensionName": "管理指标",
        "dimensionTag": "1499255834195238914管理指标",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "Y",
        "remark": "-",
        "index": 1,
        "rowIndex": 3
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "重点-测试",
        "dimensionTag": "1499255834996350977重点-测试",
        "nature": "01",
        "name": "1212",
        "statusRemark": "1212",
        "scoreStand": "1212",
        "source": "1212",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 4
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834996350977日常-测试",
        "nature": "01",
        "name": "TEST",
        "statusRemark": "100",
        "scoreStand": "100",
        "source": "100",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 5
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "日常-测试",
        "dimensionTag": "1499255834996350977日常-测试",
        "nature": "01",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.3,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 6
    },
    {
        "processId": "1499255834996350977",
        "currentProcessInfoId": null,
        "flowType": "02",
        "userName": "xxx",
        "itcode": "xxx",
        "pernr": "xxx",
        "approveStatus": "00",
        "dimensionName": "管理指标",
        "dimensionTag": "1499255834996350977管理指标",
        "nature": "02",
        "name": "12",
        "statusRemark": "12",
        "scoreStand": "12",
        "source": "12",
        "weight": 0.1,
        "status": "-",
        "remark": "-",
        "index": 2,
        "rowIndex": 7
    }
]

将数据按照字段[processId] [dimensionTag]进行处理

// 按照dimensionTag合并行
getDimensionNumber() {
  this.dimensionIndexArr=[]
  let DimensionObj={}
  this.dataList.forEach((element, index)=> {
    element.rowIndex=index
    if (DimensionObj[element.dimensionTag]) {
      DimensionObj[element.dimensionTag].push(index)
    } else {
      DimensionObj[element.dimensionTag]=[]
      DimensionObj[element.dimensionTag].push(index)
    }
  })
  for (let k in DimensionObj) {
    if (DimensionObj[k].length > 1) {
      this.dimensionIndexArr.push(DimensionObj[k])
    }
  }
},
// 按照processId合并行
getRecordNumber() {
  this.recordIndexArr=[]
  let OrderObj={}
  this.dataList.forEach((element, index)=> {
    element.rowIndex=index
    if (OrderObj[element.processId]) {
      OrderObj[element.processId].push(index)
    } else {
      OrderObj[element.processId]=[]
      OrderObj[element.processId].push(index)
    }
  })
  for (let k in OrderObj) {
    if (OrderObj[k].length > 1) {
      this.recordIndexArr.push(OrderObj[k])
    }
  }
},

根据页面展示需要,控制哪一些列上的数据需要进行合并

objectSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex===0 || columnIndex===1 || columnIndex >=9) {
    for (let i=0; i < this.recordIndexArr.length; i++) {
      let element=this.recordIndexArr[i]
      for (let j=0; j < element.length; j++) {
        let item=element[j]
        if (rowIndex==item) {
          if (j==0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j !=0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
  if (columnIndex===2) {
    for (let i=0; i < this.dimensionIndexArr.length; i++) {
      let element=this.dimensionIndexArr[i]
      for (let j=0; j < element.length; j++) {
        let item=element[j]
        if (rowIndex==item) {
          if (j==0) {
            return {
              rowspan: element.length,
              colspan: 1
            }
          } else if (j !=0) {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
},

处理样式

完成合并后会改变框架的样式,需要修复

样式错乱

在el-table上添加 [row-class-name] [@cell-mouse-enter] [@cell-mouse-leave]并实现对应方法

<el-table
  ref="table"
  v-loading="dataListLoading"
  :data="dataList"
  border
  :span-method="objectSpanMethod"
  :row-class-name="tableRowClassName"
  @cell-mouse-enter="cellMouseEnter"
  @cell-mouse-leave="cellMouseLeave"
  style="width: 100%;margin-top: 16px"
>
    .......
</el-table>

tableRowClassName({row, rowIndex}) {
  let arr=this.hoverOrderArr
  for (let i=0; i < arr.length; i++) {
    if (rowIndex===arr[i]) {
      return 'success-row'
    }
  }
},
cellMouseEnter(row, column, cell, event) {
  this.rowIndex=row.rowIndex
  this.hoverOrderArr=[]
  this.recordIndexArr.forEach((element)=> {
    if (element.indexOf(this.rowIndex) >=0) {
      this.hoverOrderArr=element
    }
  })
},
cellMouseLeave(row, column, cell, event) {
  this.rowIndex='-1'
  this.hoverOrderArr=[]
},

<style scoped>
/deep/ .el-table .success-row {
  background: #ecf4fe;
}
</style>

完整代码

果企业使用Access数据库，我们在使用Power Query导入数据时，选择【获取数据】-【自数据库】（导入Access数据）。接下来继续分享Power Query导入其他文件类型的数据以及掌握如何纵向合并数据。

一. 导入数据

其实，不论导入什么类型的数据，在界面上的操作是大同小异的，只是在获取数据入口有一定的区别。【txt，csv，excel】从自文件入口。【access等数据库】从自数据库入口。后续操作大体相同，这里就不做zui'shu

二. 纵向合并数据

我们日常使用的数据大多数情况会分多维度进行存储。如我们可能分sheet存储分地区、月份、行业、店铺等的数据。

但当我们需要做数据分析时支撑业务发展时，又想将数据汇总，做整体全面的分析，下面使用query将数据合并

step1：导入数据

【数据】- 【获取数据】-【自文件-从工作簿】- 选择对应文件导入

step2：双击链接名，进入PowerQuery编辑器

step3：合并多表数据，点击确定后，数据便可以在同一个表格中展示。

这样我们可以快速将多个表的数据进行整合，节省了时间，对于不会写vba的小伙伴也比较友好。

对于合并好的数据，我们也可以做后续的分析。

今天介绍的主要就是合并的操作，分析的相关介绍我们会从后续的分享中继续介绍，欢迎各位小伙伴评论区讨论！

tml：是Hyper Text Markup Language的简写，即超文本标记语言。

网页的组成成分为HTML-结构，CSS-表现，Javascript-行为

下面写上我所学习的一些标签，以及用法。

标题标签：<h1>-<h6> 表示从一级到6级的标题，H1的字体最大。

排序标签：<ul>无序列表，列表选项用<li>表示。<ol>有序列表，列表选项用<li>表示。<dl>定义列表，列表选项用<dt>与<dd>表示。

段落标签：<p>，表示一个段落，一大段文字

预格式文本：<pre>表示怎么书写在内容里，就会显示出书写的内容。

引用标签：<cite>表示引用作品的出处，一个人物。<blockquote>表示引用一大段内容。<q>表示引用一小段的内容，比如一首诗<code>表示引用一段代码。

超链接：<a>a标签可以实现连接内部，外部的网站，图片，需要跳转的东西等。

图片：<img> ,<img src="" alt="" title="">src中写图片的地址，alt中写图片打不开的情况下，显示的文字，也可被搜索引擎搜索。title中写给用户看的内容。鼠标指上去会有文字显示。

区块定义：<div>标签，用在划分区块，很常用的一个标签。

斜体：<em><i>,em更加具有语义化，i只是斜体，没有强调作用。

粗体：<strong><b>，strong更加具有语义化，

换行符：<br>

水平线：<hr>用得较少。

插入音频：<audio>,audio中有controls可控，autoplay自动播放，loop循环播放这些属性

插入视频：video，video中也有以上属性，还有个muted静音属性。

列表标签：<table> <th>表头，<tr>每一个tr表示有一行，<td>每有一个td表示有一列，colspan横向合并列，rowspan纵向合并。

输入框标签：<from>中写input=“”，text表示普通的文本框，placeholder中输入的值表示文本框中显示的字,disabled表示禁用这个框。

<input type="password" maxlength="6" autofocus/> 密码框，maxlength中的值是密码最长位数 autofocus自动定焦。

type="button",按钮不会提交，type="submit"与<button>xxx</button>按钮都会被提交。checkbox表示多选框，radio表示单选框。

<select>　　　　　　　　　　　　　　　　　　　　　　←指的是下拉列表

<option>xxxx</option>　　　　　　　　　　　　←指的是列表项

</select>

textarea指的是多行文本框。

在线咨询

上一篇：JS学习之正则
下一篇：杭州Web前端前景怎么样？现在参加Web前端培训还来

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商