zoukankan      html  css  js  c++  java
  • 使用element 表格进行动态合并单元格

    步骤分三步:

    1、获取数据

    2、拿到list之后使用方法去遍历条件相同的值 (判断条件自定义) 

    3、合并行,可多行添加

    _____

    定义

    spanArr: [ ]

    position: 0

    _____

    :这里是拿到数据遍历相同的值

     rowspan() {
         this.tableData.forEach((item, index) => {
           if (index === 0) {
             this.spanArr.push(1);
             this.position = 0;
           } else {
          //这里是判断的条件
    if ((this.tableData[index].name === this.tableData[index - 1].name) && (this.tableData[index].channel === this.tableData[index - 1].channel)) { this.spanArr[this.position] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.position = index; } } });   }

    :合并行,可多行添加

    //这里使用element 官方方法
    spanMethod({ rowIndex, columnIndex }) {
            //表格合并行
            if (columnIndex === 1) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 2) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 3) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 14) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
          }
  • 相关阅读:
    LINUX学习-Mysql集群-一主多从
    LINUX学习-Mysql集群-主主备份
    LINUX学习-Mysql集群-主从服务器备份
    LINUX学习-Nginx+JDK+Tomcat+Mysql搭建JAVA WEB
    LINUX学习-Nginx实现https
    LINUX学习-Nginx服务器的反向代理和负载均衡
    LINUX学习-PHP安装
    LINUX学习-Mysql安装
    Lens in Scala
    scala中的 Type Lambda
  • 原文地址:https://www.cnblogs.com/king94Boy/p/14101617.html
Copyright © 2011-2022 走看看