element table 表格合并及如何默认选中合并后的第一行

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
           }
         }
       }
    },

处理后台传来的数据，数据结构时想办法传递一个 合并几行的参数即row.len（palletType中对象的个数）和 cindex 合并后的行号如红色圈主的序号1

containers中含有多个palletType，每一个palletType为合并后的一行（如红色圈主的部分），palletType中所有的对象为一行的所有子项（如绿色线圈住的部分）

// 将要合并的行都赋二个属性值 ，一个共同的编号即 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;
}