Project scenario:
Requirements: Not only the merging of the left column but also the merging of the middle and tail column cells. Ele.me official currently only has the merging case of the starting column. The implementation
effect is shown in the figure: >>>
Code encapsulation for merging rows and columns:
Tip: Here is a description of the problems encountered in the project:
For example: data is lost from time to time during the data transmission process, and occasionally a part of the data is lost.
The code for receiving data in the 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
}
}
Reference this file in the component:
Introduce this file into the page component that requires this requirement >>>
and then bind (:span-method="objSpanMethod") function on the table tag (v-bind)! >>>
Import the corresponding function>>>
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)
}
},
After requesting the data, store the columns that need to be merged into an array, and then pass the array to the megerCell function for processing. >>>
