table合并单元格

叮咚前端

已于 2023-08-10 18:49:47 修改

阅读量542

点赞数

CC 4.0 BY-SA版权

文章标签：前端 linux javascript

于 2023-08-10 18:48:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43033748/article/details/132216129

文章介绍了在JavaScript中如何对数据列表进行合并，规则是基于某些字段（如companyName,inboundOrderNo等）的相同值进行合并，而其他值则单独计数。提供了一个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]
		}
	}
},