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

​

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

问题描述及解决方案1、多级表头数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

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

代码语言：javascript代码运行次数：0运行复制

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

​编辑

代码语言：javascript代码运行次数：0运行复制

3、自定义表头颜色

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

代码语言：javascript代码运行次数：0运行复制 .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;

}

}

}​我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！