VUE element ui 动态合并单元格问题

洋洋@

已于 2023-12-21 17:56:16 修改

阅读量4.1k

点赞数 9

分类专栏：前端问题文章标签： elementui vue.js javascript

于 2022-01-24 19:41:09 首次发布

本文链接：https://blog.csdn.net/weixin_43407997/article/details/122673795

版权

前端问题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

** 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，惊觉自己已经不会组织语言了。要经常练习才好，加油小羊同学~！

洋洋@

关注

9
点赞
踩
37

收藏

觉得还不错? 一键收藏
7
评论
VUE element ui 动态合并单元格问题

** VUE element ui 动态合并单元格问题**1.基础方法//最开始从网上找到了一个基本的可以同时兼顾行和列的方法，时间太久忘记出自哪里了.如下：//效果//绑定 :span-method=“arraySpanMethod”<el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%" clas
复制链接

扫一扫