使用elementUI构建复杂表格，合并行或列，多级表头等

项目场景：

        前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~

---

问题描述及解决方案

1、多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

2、合并行或列

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

3、自定义表头颜色

最简单的：修改表头样式即可

  .tableWrap {
    padding: 0 20px;
    //  width: 100%;
    // margin: 0 auto;
    /deep/ .el-table__header th {
      background-color: #409eff!important ; /* 设置表头颜色 */    
     color: #fff; /* 设置表头文字颜色 */
    //  background-color:#FAFAFA;
    //  color:#252525;
     border:1px solid f5f5f5;
    }
    /deep/ .el-table .cell {
      // font-weight: 700;
      font-size: 16px;
      padding: 0;
    }
    .gzlWrap {
      // border-bottom:1px solid #dfdfdf;
      &:last-child {
        border-bottom: none;
      }
      span {
        display: inline-block;
        padding: 5px 0;
      }
      .key {
        width: 60%;
      }
      .value {
        width: 40%;
      }
    }

    .selfTableHead {
      display: flex;
      span {
        display: inline-block;
        width: 60px;
      }
    }
  }

---