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] += 1
			this.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: 0
		return {
			rowspan: _row,
			colspan: _col
		}
	}
	
	if (columnIndex === 1 ) {  // 这块说的是表格里的第二列
		const  _row = this.spanArr[rowIndex]
		const _col = _row > 0 ? 1 : 0
		return {
			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>
官网写法就行