el-table 列表合并方法复制即用_el-table 复合表格合并-优快云博客

本文链接：https://blog.youkuaiyun.com/Kerwin__li/article/details/130573532

该文介绍了一种在Vue应用中处理数据列表的方法，通过定义合并规则和合并数组，实现当表格中特定列的值相同时，进行行合并的功能。主要涉及的数据结构有mergeObj和mergeArr，以及两个关键函数getSpanArr和objectSpanMethod，用于判断合并规则和执行合并操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、将所有一样的列进行合并

data(){
    return{
        // 合并列表的规则
		mergeObj:{},
    }
}


// 列表合并规则判断
getSpanArr (data) {
	this.mergeArr.forEach((key, index1) => {
		let count = 0
		this.mergeObj[key] = []
		data.forEach((item, index) => {
			if (index === 0) {
				this.mergeObj[key].push(1)
			} else {
				if (item[key] === data[index - 1][key]) {
					this.mergeObj[key][count] += 1
					this.mergeObj[key].push(0)
				} else {
					count = index
					this.mergeObj[key].push(1)
				}
			}
		})    
},
// 列表合并方法
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
	if (this.mergeArr.indexOf(column.property) !== -1) {
		if (this.mergeObj[column.property][rowIndex]) {
			return [this.mergeObj[column.property][rowIndex], 1]
		} else {
			return [0, 0]
		}
	}
},

2、针对某几个相同的值进行合并，其他相同不合并

data(){
    return{
        // 合并列表的规则
		mergeObj:{},
        // 需要合并的字段
		mergeArr：['companyName','inboundOrderNo','inboundDate','createUserId','supplierCode','type','accountSign','accountTime','voucherNo'],
    }
}


// 列表合并规则判断
getSpanArr (data) {
	this.mergeArr.forEach((key, index1) => {
		let count = 0
		this.mergeObj[key] = []
		data.forEach((item, index) => {
			if (index === 0) {
				this.mergeObj[key].push(1)
			} else {
				if (item[key] === data[index - 1][key]) {
					this.mergeObj[key][count] += 1
					this.mergeObj[key].push(0)
				} else {
					count = index
					this.mergeObj[key].push(1)
				}
			}
		}) 
        // 把需要合并的字段合并
        this.mergeArr.forEach(key=>{
			this.mergeObj[key] = this.mergeObj.inboundOrderNo
		})   
},
// 列表合并方法
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
	if (this.mergeArr.indexOf(column.property) !== -1) {
		if (this.mergeObj[column.property][rowIndex]) {
			return [this.mergeObj[column.property][rowIndex], 1]
		} else {
			return [0, 0]
		}
	}
},