el-table的纵向合并横向合并表头合并

关于el-table的合并单元格
（常规的纵向合并和野路子横向合并外加表头合并）

表格大概长这样 ↑

通过给table 传入span-method方法可能实现合并行或列方法的参数可以是一个对象，
里面包含

当前行row
当前列column
当前行号rowIndex
当前列号columnIndex

四个属性
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan 第二个元素代表colspan 也可以返回一个键名为rowspan和colspan的对象
（这段话是在哪抄的被我摘到笔记里了）

后台给的数据格式：

this.dataList = [{mergetype: 1 // 是否向下合并的标识，type: '企业规划'，merge: '大型企业'，column: '2023',products: '',remark: ''}
]

DATA：

data() {return {dataList: [],rowList: [],spanArr: [],position: 0}
}

el-table的重点方法

<el-table:span-method="arraySpanMethod" :span-style="headMerge" :cell-style="changeCellStyle" :cell-class-name="addClass">
</el-talbe>

获取数据后执行rowspan()方法

// 纵向相同项合并
rowspan() {this.dataList.forEach((item, index) => {if (index === 0) {this.spanArr.push(1)this.postion = 0} else {if (this.dataList[index].mergetype === this.dataList[ index-1 ].mergetype) {this.spanArr[this.position] += 1this.spanArr.push(0)} else {this.spanArr.push(1)this.position = index}})
}

表格合并单元格

arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1: 0return {rowspan: _row,colspan: _col}}if (columnIndex === 1 ) {  // 这块说的是表格里的第二列const  _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}
}

表头合并

headMerge({ row, column, rowIndex, columnIndex }) {if ( rowIndex === 1 ) {if (columnIndex === 0 || columnIndex === 1) {return { display: 'none'}}if ( rowIndex === 0 ) {if (columnIndex === 0) {this.$nextTIck(() => {if (document.getElementByClassName(colum.in).length ! == 0 ) {document.getElementByClassName(column.id)[0].setAttribute('rowSpan', 3)return false}})return column}}}
}

野路子：隐藏需要横向合并的中间线
（我实在不知道该咋横向合并网上也没搜着激灵一动寻思着要不把这条线藏起来吧！）

changeCellStyle({ row, column, rowIndex, columnIndex }) {if ( this.dataList[rowIndex].column == this.dataList[rowIndex].merge && columnIndex == 2 ) {return 'border-right: none'}if (this.dataList[rowIndex].merge == ' ' && columnIndex == 2) {return 'border-rgiht: none'}
}

横向合并数值居中
（上面虽然把线隐藏了但是数值是歪歪的所以给个样式调调）

addClass({ row, column, rowIndex, columnIndex }) {if (this.dataList[rowIndex].merge == ' ' && columnIndex == 3) { // 表格中第四列的下标是3 return 'mergingCenter' // 这是个类名}
}

<style lang="scss">.merginCenter {.coll .el-tooltip {right:  50%!important;}}
</style>

注意需使用全局属性：

在elementUI中
row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效
因为之前的代码都是在组件中编写的，所以上面的<style>去除中的scoped即可该组件中的样式变为全局属性

关于类名有更简单的方法（推荐）使用

使用并给其添加scope属性
再内嵌一层设置有相应类名的包裹要展示的内容

<el-table-column prop="content" label="信息"><template scope="scope"><span class="merginCenter ">{{ scope.row.content }}</span></template>
</el-table-column>
这个颜色为啥这样了？？？

<el-table-column>
官网写法就行

el-table的纵向合并横向合并表头合并相关推荐

JAVA导出Excel通用工具类——第一篇：详细介绍POI 导出excel的多种复杂情况，包括动态设置筛选、动态合并横向（纵向）单元格等多种复杂情况——保姆级别，真的不能再详细了，代码拿来即用）
JAVA导出Excel通用工具--第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选.动态合并横向(纵向)单元格等多种复杂情况--保姆级别,真的不能再详细了,封装通用工具类,代码拿 ...
css 纵向合并_excel只能合并横向单元格
excel怎么将横向和纵向合并在一个单元格在B2单元格输入以下公式,然后向右向下填充公式 =B$1&$A2 详见附图示例 excel在有合并单元格的表怎么只选一列? 就是表格顶部有合并单元格 ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
Element表格之表头合并、行合并和列合并
文章目录一.合并表头二.合并表格行三.合并表格列最近写vue开发项目的时候,很多地方用到了Element组件中的Table 表格.经过一周的边学边做,我总结了以下三种有关表格的合并方法. 一. ...
csstable跨列居中_html中table表格如何跨行或跨列合并单元格
在html中的table表格实现跨行或跨列合并单元格,需要用到以下两个属性: 1.跨列colspan属性:就是合并左右关系的单元格: 2.跨行rowspan属性:就是合并上下关系的单元格: 而在tab ...
GridView多行表头合并
多行表头合并, 网上很多实例, 这里写的很详细, 力求让每个人都能看懂. 实现原理:GridView在ASP.NET中最终转为HMTL的表格显示表头. 在GridView创建行表头行时: e.Row. ...
php按照字段合并数组,PHP实现数组根据某个字段进行水平合并横向合并代码实例...
本篇文章小编给大家分享一下PHP实现数组根据某个字段进行水平合并横向合并代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. PHP数组水平合并,横向合并,两条数据合并成 ...
vue有纵向和横向表头表格
github源码地址:https://github.com/zhjing1019/moreTreeTable 使用方法一.下载该组件 npm install more-tree-table 在mai ...
excel 表头合并和拆分的例子
自己整理了一个excel 表头合并和拆分的例子 import java.io.File; import java.io.IOException;import jxl.Workbook; import ...

el-table的纵向合并横向合并表头合并

el-table的纵向合并横向合并表头合并相关推荐

最新文章

热门文章

el-table的纵向合并 横向合并 表头合并

el-table的纵向合并 横向合并 表头合并相关推荐

最新文章

热门文章

el-table的纵向合并横向合并表头合并

el-table的纵向合并横向合并表头合并相关推荐