element-Ui 表格,自定义计算 合并单元格

需求


- ui画的表格需要根据不同的数据项,进行合并不确定的单元格
- 标题3会有不确定的项且进行合并
- element-Ui 表格,自定义计算 合并单元格_第1张图片

官网


示例没毛病

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

使用1


先合并两个试试水,更改后,标题没合并

 if ( columnIndex === 0 && rowIndex==2) {
        if (rowIndex %2==0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        }
        else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

在这里插入图片描述

优化


1.对于条件要明确,比如我需要第三行开始到第四行合并,

//那我第一个条件必须要把第三第四行放进来
//rowIndex > 1 也是要指明位置 (0.1.2.3.4)
//总数-1是我要计算的位置在倒数第二行
//loadColSpan 合并不确定的数目的单元格
   if (columnIndex === 0 && rowIndex > 1 && rowIndex <(总数-1)) {
   //指明第三行
          if (rowIndex ==2) {
            return {
              rowspan: this.loadColSpan,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }

你可能感兴趣的:(vue,element-ui,JS,ui)