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導入其他文件類型的數據以及掌握如何縱向合并數據。

一. 導入數據

其實，不論導入什么類型的數據，在界面上的操作是大同小異的，只是在獲取數據入口有一定的區別?！総xt，csv，excel】從自文件入口?！綼ccess等數據庫】從自數據庫入口。后續操作大體相同，這里就不做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小時內與您取得聯系。

整合營銷服務商