vue-element＞＞＞指定表格中的某一列或者多列【单元格】合并＜＜＜

项目场景：

需求：不仅仅是左侧列的合并还有中间以及尾部列单元格的合并，饿了么官方目前只有起始列的合并案例
实现效果如图所示：>>>

---

合并行-列的代码封装：

提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：

export const mergeCol =({
	condition,
	colIndex,
	isBefore = true，
	data = []
  }) => {
	let mergeArr = []
	let objSpanMethod = ({ rowIndex, columnIndex }) => {
	let condi = isBefore? columnIndex < colIndex : columnIndex > colIndex
		if(condi) {
			const rowspan =mergeArr[rowIndex]
			const colspan rowspa> 0 ? 1: 0
		return {
			rowspan,
			colspan
		}
	}
}

/*********************************/

let collectMergeLine = () => {
 let collectArr =[1]
 let collectPos =0
 for(let i=1; data.length; i++) {
  if (condition(i, data[i])) {
	collectArr[collectPos] += 1
	collectArr.push(0) 
  } else {
	collectArr.push(1)
	collectPos = i
	}
 }
 console.1og(collectArr)
 mergeArr = collectArr
}
return { mergeArr, objSpanMethod. collectMergeline }

/**********************************/

/*合併表格單元格
* @param {array} colsIndex合併行索引
*/
export class mergeTableCol {
 constructor(colsIndex) {
  this.colsIndex = colsIndex
  this.mergeArr =[]
}
objSpanMethod({ rowIndex, columnIndex }) {
let condi = this.colsIndex.includes(columnIndex)
 if (condi) {
	const rowspan = this. mergeArr[rowIndex]
	const colspan =rowspan > 0 ? 1 : 0 
    return {
	 rowspan,
	 colspan
    }
  }
}

/*********************************/
/**
*收集合併行
*@param {function} condition條件返回true或false
*@param {array} data表格數據
*/
collectMergeLine(condition, data) {
  let collectArr = [1]
  let collectPos = 0
  for(let i = 1; i < data.length; i++) {
    if(condition(i, data[i])) {
      collectArr[collectPos] +=1
      collectArr.push(0)
    } else {
      collectArr.push(1)
      collectPos = i
      }
   }
    this.mergeArr = collectArr
    return collectArr
  }
}

---

在组件中引用该文件：

在需要此需求的页面组件引入此文件>>>

然后在表格标签上（v-bind）绑定（:span-method=“objSpanMethod”）函数！>>>

导入对应的函数>>>

methods:{
//表格合并处理
mergeCell(arr) {
  this.mergeFn = new mergeTableCol(arr)
  if(this.tableData.length > 0 ) { 
    this.collectMergeLine()
  }
},
objSpanMethod(tableParams) {
  if(this.mergeFn.objSpanMethod) {
    return this.mergeFn.objSpanMethod(tableParams)
   }
},
collectMergeLine(data = this.tableData) {
  if(this.mergeFn.collectMergeLine) {
	//判断渲染的数据id是否一致，合并条件
  let condition = i=> data[i].id == data[i-1].id
	//第一个参数是条件,返回true或false
  this.mergeArr = this.mergeFn.collectMergeLine(condition, data)
 }
},

请求到数据后，将需要合并的列，存入到数组中，然后将数组传递到megerCell函数中去做处理。>>>

---