el-table 列表合并方法复制即用

最新推荐文章于 2024-04-08 18:00:33 发布

Kerwin__li

最新推荐文章于 2024-04-08 18:00:33 发布

阅读量338

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/Kerwin__li/article/details/130573532

版权

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]
		}
	}
},