草庐IT

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

洋洋@ 2023-04-05 原文

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

有关VUE element ui 动态合并单元格问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  4. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  5. ruby - 如果指定键的值在数组中相同,如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同,我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中,我有带单元格的表格。在其中一个单元格中,我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  10. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

随机推荐