技術標籤：前端知識經驗總結

1. 合併效果及程式碼如下：

1.表格出

2.js
合併前的每一個小行都會執行一此下面這個程式碼，如上圖所示，執行第一行時合併，執行到第二行設定合併行數為0 就可以了

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {      
         var _row = row.len;
         if(row.len>0){
            return{
              rowspan: row.len,
              colspan: 1
            }
         }else{
           return{
             rowspan: 0,
             colspan: 0
           }
         }
       }
    },
 

containers中含有多個palletType，每一個palletType為合併後的一行（如紅色圈主的部分），palletType中所有的物件為一行的所有子項（如綠色線圈住的部分）

處理後臺傳來的資料，資料結構時想辦法傳遞一個 合併幾行的引數即row.len（palletType中物件的個數）和 cindex 合併後的行號如紅色圈主的序號1

// 將要合併的行都賦二個屬性值 ，一個共同的編號即 cindex,
  for(let i =0;i<this.containers.length;i++){
            var palletType = containers[i].pallet_types;
            for(let j=0;j<palletType.length;j++){
              var pallet = palletType[j];
              // 將要合併的行有一個共同的編號即 cindex,並將除第一行外的所有行
              if(j===0){
                pallet['cindex'] = i+1;
                pallet['len'] = palletType.length;
                pallets_types.push(pallet);
              }else{
                pallet['cindex'] = i+1;
                pallet['len'] = 0;
                pallets_types.push(pallet);
              }
            }
          }
 

資料結構是
“container”: [{
“container_no”: “”,
“container_l”: “”,
“container_w”: “”,
“container_h”: “”,
“vp”: null,
“container_wt”: “”,
“container_v”: “”,
“pallet_types”: [{
“pallet_no”: “”,
“pallet_num”: “1”,
“pallet_wt”: “”,
“pallet_v”: “”,
“pallet_l”: “”,
“pallet_w”: “”,
“pallet_h”: “”,
“pallet_vp”: “”,

“color”: null
}, {
“pallet_no”: “”,
“pallet_num”: “”,
“pallet_wt”: “”,
“pallet_v”: “”,
“pallet_l”: “”,
“pallet_w”: “”,
“pallet_h”: “”,
“pallet_vp”: “”,
“color”: null
}, {
“pallet_no”: “”,
“pallet_num”: “”,
“pallet_wt”: “”,
“pallet_v”: “”,
“pallet_l”: “”,
“pallet_w”: “”,
“pallet_h”: “”,
“pallet_vp”: “”,
“color”: null
}]
}]
這樣合併就完成了。

2.預設選中合併後的第一行

預設設定選中第一行

this.$nextTick(function() {
        for(let i=0;i<this.pallet_types.length;i++){
          if(this.pallet_types[i].cindex!=null && this.pallet_types[i].cindex==1){
            this.$refs.contstb.setCurrentRow(this.pallet_types[i]);
          }else{
            break;
          }
        }
      })

3.表格合併後表格中文字的顏色css

設定選中後文字的顏色
.workflowtb .el-table__body tr.current-row>td{
background-color: #fff;
font-size: 12px;
font-family: FZLTHJW–GB1-0, FZLTHJW–GB1;
font-weight: normal;
color: #2D7CE4;
line-height: 14px;
}
設定選中某行後 列中含有表格，表格中文字的顏色
.workflowtb .el-table__body tr.current-row .el-table{
background-color: #fff;
font-size: 12px;
font-family: FZLTHJW–GB1-0, FZLTHJW–GB1;
font-weight: normal;
color: #2D7CE4;
line-height: 14px;
}