赞
踩
** VUE element ui 动态合并单元格问题**
1.基础方法
//最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下:
//效果
//绑定 :span-method=“arraySpanMethod”
<el-table
:data="tableData"
:span-method="arraySpanMethod"
style="width: 100%"
class="monOrdUpTable"
:header-cell-style="{
background: 'rgb(243, 243, 243)',
color: 'rgb(55, 54, 54)',
}"
border
:height="tableHeight"
>
//JS
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并行列产品名字相同合并(计算组长度以内的列,需要进行合并操作的列) let mergeLength = 3; //需要进行横纵合并的列 if (columnIndex < mergeLength) { let finArray = [1, 1]; // 处理行数据 let cgname = Object.keys(row)[columnIndex]; // console.log(cgname); if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; //计算需要进行合并操作的行 for (let i = 0; i < this.tableData.length - 1; i++) { // 只合并连续的 if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } } finArray[0] = rowspan; } else { finArray[0] = 0; } // 处理列数据 let colkeys = Object.keys(row); let cgvalue = Object.values(row)[columnIndex]; if ( columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]] ) { let colspan = 1; //计算需要进行合并操作的列 for (let i = columnIndex; i < mergeLength; i++) { // 只合并连续的 if ( row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength ) { colspan++; } } finArray[1] = colspan; } else { finArray[1] = 0; } return finArray; } },
//第一次没有改代码,直接就成功了。
2.进阶:电费单价合并要与ITEM合并逻辑一致,而不是看单价是否相同合并;ITEM合并时,要在相同厂区的前提下。(这个问题,4中有更简便的解决方法)
//效果
//JS
arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex == 0 || columnIndex == 1 || columnIndex == 5) { let finArray = [1, 1]; // 处理行数据 let cgname = Object.keys(row)[columnIndex]; var type1Name = this.tableData[rowIndex].type1Name; if (columnIndex == 5) {//第五列为单价列,单做处理 cgname = "type1Name";//记录ITEM的属性,因为单价要与ITEM规则相同 //这里用ITEM代替原本的动态单价属性==>相当于第五列写死 if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; //记录本行的厂区 var factoryName = this.tableData[rowIndex].factoryName; for (let i = rowIndex; i < this.tableData.length - 1; i++) { // 在初版基础上加 以厂区相同为前提的判断 if (factoryName === this.tableData[i].factoryName) { if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } } else {//如果厂区不同,及时break掉,并记录新厂区 factoryName = this.tableData[i].factoryName; break; } } finArray[0] = rowspan; } else { // console.log(this.tableData[rowIndex - 1][cgname]); finArray[0] = 0; } } else {//不是第五列部分:正常进行,只是加厂区限制:为了解决合并当前行受前一列分类限制的影响 if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; //计算需要进行合并操作的行 var factoryName = this.tableData[rowIndex].factoryName; for (let i = rowIndex; i < this.tableData.length - 1; i++) { // if (factoryName === this.tableData[i].factoryName) { //不得5 if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } } else { factoryName = this.tableData[i].factoryName; break; } } finArray[0] = rowspan; } else { finArray[0] = 0; } } // 处理列数据 列合并没变化 let colkeys = Object.keys(row); let cgvalue = Object.values(row)[columnIndex]; if ( columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]] ) { let colspan = 1; //计算需要进行合并操作的列 for (let i = columnIndex; i < mergeLength; i++) { // 只合并连续的 if ( row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength ) { colspan++; } } finArray[1] = colspan; } else { finArray[1] = 0; } return finArray; } },
3.加一些行和列限制的合并
前4列基础方法全部适用,后面的列本想直接写入作用范围却出现了很多问题。最后发现只有中间灰色部分需要进行 行列合并。于是添加限制,使合并方法只作用到这部分就可以了
//效果
//JS
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并行列产品名字相同合并(计算组长度以内的列,需要进行合并操作的列) // 28 let mergeLength = 28; //需要进行横纵合并的列 if (columnIndex < mergeLength) { let finArray = [1, 1]; // 处理行数据 let cgname = Object.keys(row)[columnIndex]; if (columnIndex < 4) { //左侧部分正常合并 if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; //计算需要进行合并操作的行 for (let i = 0; i < this.tableData.length - 1; i++) { // 只合并连续的 if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } } finArray[0] = rowspan; } else { finArray[0] = 0; } } else { // console.log(this.tableData.length-11) //右侧部分 只有rowIndex>4&&rowIndex<this.tableData-11生效 if (rowIndex>4&&rowIndex<this.tableData.length-11) { //右侧部分正常合并 if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; for (let i = 0; i < this.tableData.length - 1; i++) { if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } } finArray[0] = rowspan; } else { finArray[0] = 0; } } } // 处理列数据 let colkeys = Object.keys(row); //一行的属性 let cgvalue = Object.values(row)[columnIndex]; //这里不太好,写死了这么多列。 //这里是因为价格那行标题,我想三个一组去处理合并的逻辑。于是7 10 13... 都当成第0列的逻辑去处理(相当于0列一样,即使和前一列相等也可以进入合并逻辑) if ( columnIndex === 0 || columnIndex === 7 || columnIndex === 10 || columnIndex === 13 || columnIndex === 16 || columnIndex === 19 || columnIndex === 22 || columnIndex === 25 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]] ) { var colspan = 1; //计算需要进行合并操作的列 var char = colkeys[columnIndex].charAt( colkeys[columnIndex].length - 1 ); for (let i = columnIndex; i < mergeLength; i++) { // 只合并连续的 &&columnIndex < 4 if ( row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength ) { if (columnIndex < 4) { colspan++; } else { if ( colkeys[i].charAt(colkeys[i].length - 1) == colkeys[i + 1].charAt(colkeys[i + 1].length - 1) && i + 1 < mergeLength ) { colspan++; } else { break; } } } else { break; } } finArray[1] = colspan; } else { finArray[1] = 0; } return finArray; } },
4.机种名称合并时要在机种类型相同的前提下
天呀,写到这里我才发现这个问题和 2 是一样的(ITEM合并时,要在相同厂区的前提下。)写的时候没想到,不过找到了另一种解决方式.(感觉比上面好,但是不能解决前一列不同此列相同,这种会合并却不该合并的情况。2可以解决)
//JS
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并行列产品名字相同合并(计算组长度以内的列,需要进行合并操作的列) let mergeLength = 3; //需要进行横纵合并的列 if (columnIndex < mergeLength) { let finArray = [1, 1]; // 处理行数据 let cgname = Object.keys(row)[columnIndex]; if ( rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname] ) { let rowspan = 1; **//其实只改变的这里: i从本行开始比较。** for (let i = rowIndex; i < this.tableData.length - 1; i++) { **// i=rowIndex 开始,并且及时break:只合并连续的,下面有相同的元素也不参与** if ( this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname] ) { rowspan++; } else {//遇到不同的立刻break; break; } } finArray[0] = rowspan; // console.log(finArray[0]) } else { finArray[0] = 0; // console.log(finArray[0]) } // 处理列数据 let colkeys = Object.keys(row); //一行的属性 let cgvalue = Object.values(row)[columnIndex]; //值 if ( columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]] ) { var colspan = 1; //计算需要进行合并操作的列 var char = colkeys[columnIndex].charAt( colkeys[columnIndex].length - 1 ); for (let i = columnIndex; i < mergeLength; i++) { // 只合并连续的 &&columnIndex < 4 if ( row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength ) { colspan++; } else { break; } } finArray[1] = colspan; } else { finArray[1] = 0; } return finArray; } },
每一次遇到单元格合并,都会有新的惊喜等着我(苦笑),虽然痛苦好再都解决出来了~
第一次写CSDN,惊觉自己已经不会组织语言了。要经常练习才好,加油小羊同学~!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。