Element表格之表头合并、行合并和列合并

el-table合并表头handerMethod_el-table表头合并-优快云博客

Element表格之表头合并、行合并和列合并_element表格表头合并-优快云博客

一、合并表头

话不多说，先看效果图：

表格结构如上，其中:header-cell-style对表头做了一些处理。

headFirst({row, colunm, rowIndex, columnIndex}) {
   if (rowIndex === 1) {
   //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
       return {display: 'none'}
   }
       return "background:#f5f7fa"
}

二、合并表格行

效果图如

 

 要进行表格合并，关键在于你要对数据渲染的前进行判断处理，在这里，首先要在table中写入:span-method=‘objectSpanMethod’,然后在js部分写上方法。

这里我以第一列为例：

		// 领域合并
        , courseinit() {
            // 首先初始化
            var _this = this;
            this.courseArr = []
            this.coursePos = 0
            for (var i = 0; i < _this.tableData2.length; i++) {
             //判断是否是第一行
                if (i === 0) {
                	//导入第一行数据
                    _thi