elementUi合并表格el-table第一列的相同内容的行

程序媛之博客

已于 2023-03-08 15:09:45 修改

阅读量1.1k

点赞数 3

分类专栏：前端文章标签： vue.js 前端 javascript

于 2023-01-13 17:36:33 首次发布

本文链接：https://blog.csdn.net/qq_42080594/article/details/128677203

版权

前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

如上图所示，路基包含水泥、砂石料、压实度、路床弯沉、钢筋接头这五行，所以我们要像ecxel表格一样合并路基这个单元格。具体按照以下来做：

// 合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  let spanOneArr = [],concatOne = 0;
  this.tableData2.map((item,index)=>{
    if(index === 0){
      spanOneArr.push(1);
    }else{
    //第一列需合并相同内容的判断条件
      if(item.wbsName === this.tableData2[index-1].wbsName){
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      }else{
        spanOneArr.push(1);
        concatOne = index;
      };
    }
  });

  if(columnIndex === 0){
    const _row = spanOneArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return{
      rowspan:_row,
      colspan:_col
    }
  }
},

// 表格样式相关

rowStyle({ row, rowIndex }) {

// console.log('444')

if (rowIndex % 2 === 1) {

return { background: "rgba(0,114,255,0.04)" };

} else {

return "";

}

},

headerStyle({ row, rowIndex }) {

// console.log(rowIndex)

return "background:RGBA(2, 36, 75, 1);";

},

tableHeaderColor({ row, column, rowIndex, columnIndex }) {

if (rowIndex === 0) {

return "color:#6797D2;background:rgba(0,158,255,0.08);";

}

}