Node-RED教程 – 126 – UI頁面上傳e

Node-RED教程 – 126 – UI頁面上傳execl文件并顯示(合并單元格)

能：

在UI頁面中上傳execl表格文件
支持xlsx、xls格式
在UI頁面中顯示導入的數據表格
提供xlsx測試文件

Node-RED界面：

前端畫面：

資源地址：han-link.cn/6271.html

#工業#

考自下列文章

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>

完整代碼

、在計算機桌面的Wps演示圖標上雙擊鼠標左鍵，將其打開運行。如圖所示；

軟件版本：
軟件大小：
軟件授權：
適用平臺：Android
下載http://dl.pconline.com.cn/download/83972.html

2、在打開的Wps演示程序窗口，打開“插入”菜單選項卡，并點擊插入工具欄中的“公式”選項按鈕。如圖所示；

3、點擊公式選項后，會打開“公式編輯器”對話框。如圖所示；

4、在公式編輯器對話框中，選擇一個四行一列的矩陣。如圖所示；

5、接著在編輯器中輸入文字信息，不要按回車鍵換行，可以利用tab鍵換行。如圖所示；

6、4行文字輸入完成，鼠標點擊右側，在輸入右邊的文字。如圖所示：

7、文字輸入好以后，關閉公式編輯器，輸入的內容就會自動顯示在Wps演示中。如圖所示；

在線咨詢

上一篇：一個易遷移、兼容性高的 Flutter 富文本方案
下一篇：css的基礎樣式邊框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商