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
              };
            }
          }
  • 相关阅读:
    入门activiti-------1简单运行
    JS对象、构造器函数和原型对象之间的关系
    myeclipse配背景色
    maven的pom.xml文件错误
    oracleXE简易版---使用基础
    ognl表达式注意事项
    Executors、ExecutorService、ThreadPoolExecutor
    ThreadPoolExecutor
    Phaser相位(工具的实战案例使用)
    ForkJoin
  • 原文地址:https://www.cnblogs.com/king94Boy/p/14101617.html
Copyright © 2011-2022 走看看