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

最新推荐文章于 2024-08-30 09:35:19 发布

原创最新推荐文章于 2024-08-30 09:35:19 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端知识经验总结专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格合并方法，通过给定的数据结构，为每一行添加合并属性，并利用Vue框架的方法来完成合并效果。同时展示了如何设置默认选中合并后的第一行以及表格中文字的颜色。

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