elementUI 合并单元格

第二列在第一列合并的基础上合并

合并单元格鼠标移上去高亮显示用到以下三个事件或方法
row-class-name：行类名绑定
cell-mouse-enter：鼠标移入事件
cell-mouse-leave：鼠标移出时间
html

<div class="hoverStyle">
<el-table
 :data="list"
 border 
 :span-method="arraySpanMethod" 
 :row-class-name="isCell?setCellClass:''"
 @cell-mouse-enter="handleMouseEnter"
 @cell-mouse-leave="handleMouseLeave">
	<el-table-column prop="name" label="名称" align="center">
	<el-table-column prop="num" label="数量" align="center">
	<el-table-column prop="many" label="价钱" align="center">
</el-table>
</div>

javascript

data() {
	return {
		list: [
			{name: '设计', mun: 8, many: 9},
			{name: '设计', mun: 8, many: 9},
			{name: '设计', mun: 65, many: 9},
			{name: '设计', mun: 89, many: 9},
			{name: '大概', mun: 89, many: 9},
			{name: '大概', mun: 89, many: 9},
			{name: '大概', mun: 8, many: 9},
			{name: '大概', mun: 8, many: 9},
			{name: '设计', mun: 8, many: 9},
			{name: '设计', mun: 5, many: 9},
			{name: '设计', mun: 5, many: 9},
		],
		spanArr: [],
		spanArr1: [],
		contactDot: 0,
		contactDot1: 0,
		isCell: false,
		cellIndex: ''
	}
},
mounted () {
	this.hebinTable()
},
methods: {
	// 鼠标移入事件
	handleMouseEnter(row, column, cell, event){
		// 第一行直接跳过
		if(row.index===0){
			return
		}
		// 当鼠标移上去的这一行是合并行下面的数据时,也就是说不是合并行的第一行
		if (this.spanArr[row.index] === 0) {
			// 遍历查找改行所在合并行的第一行
			for (let i = row.index; i > -1; i--) {
				if (this.spanArr[i] !== 0) {
					this.cellIndex = i
					this.isCell = true
					break
				}
			}
		}
	},
	// 鼠标移出事件
	handleMouseLeave() {
		this.isCell = false
	},
	// 设置行样式
	setCellClass({row,column,rowIndex,columnIndex}) {
		// 给当前鼠标移入的合并行的第一行加上样式名
		if(row.index === this.cellIndex) {
			return 'cellClass'
		}
	},
	hebinTable () {
		// 在每次进入时要先把计数数组和数值初始化，否则表格进行操作后会错乱
		this.spanArr = []
		this.contactDot = 0
		
		this.list.forEach((item, index) => {
			item.index = index
			if (index === 0) {
				this.spanArr.push(1)
			} else {
				if (item.name === this.list[index-1].name) {
					this.spanArr[this.contactDot] += 1
					this.spanArr.push(0)
				} else {
					this.spanArr.push(1)
					this.contactDot = index
				}
			}
		})
		this.list.forEach((item, index) => {
			item.index = index
			if (index === 0) {
				this.spanArr1.push(1)
			} else {
				// 在第一列的基础上判断第二列（除去第一行外，等于0说明这一行被合并，第二列可以继续往下合并，不等于0说明这是第一列新的一行，第二列也直接开启新的一行不再继续合并）
				if (this.spanArr[index] === 0) {
					if (item.name === this.list[index-1].name) {
						this.spanArr1[this.contactDot] += 1
						this.spanArr1.push(0)
					} else {
						this.spanArr1.push(1)
						this.contactDot = index
					}
				} else {
					this.spanArr1.push(1)
					this.contactDot = index
				}
			}
		})
	},
	arraySpanMethod({ row, column, rowIndex, columnIndex }) {
		if (columnIndex === 0) {
			const _row = this.spanArr[rowIndex]
			const _rol = _row > 0 ? 1 : 0
			return {
				rowspan: _row,
				colspan: _rol
			}
		}
		if (columnIndex === 1) {
			const _row = this.spanArr1[rowIndex]
			const _rol = _row > 0 ? 1 : 0
			return {
				rowspan: _row,
				colspan: _rol
			}
		}
	}
}

css

.hoverStyle .el-table tbody tr.cellClass>td {
		background: rgba(0, 158, 250, 0.219) !important;
}