zoukankan      html  css  js  c++  java
  • 使用Element的table合并单元格(按相同项) 多列

    效果图:

    代码:

    <div class="table">
                            <el-table ref="table_8" :data="saCountAvg" border style=" 99%;" :height=winHeight :header-cell-style="tableHeaderColor" :cell-style="cellStyle" :span-method="objectSpanMethod8">
                                <el-table-column prop="name" label="SA" align="center"></el-table-column>
                                <el-table-column prop="getTime" label="产值达均值线以上次数" align="center"></el-table-column>
                                <el-table-column prop="timeIndex" label="月份" align="center"></el-table-column>
                                <el-table-column prop="monthlyIntervalValue" label="月度产值" align="center"></el-table-column>
                                <el-table-column prop="avgValue" label="月度均值" align="center"></el-table-column>
                            </el-table>
                        </div>
    methods: {
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
              return "color: #4f81bd;font-weight: bold ;";
            }
         },
    
    objectSpanMethod8({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              const _row = (this.flitterData(this.saCountAvg ).one)[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 1) {
              const _row = (this.flitterData(this.saCountAvg ).two)[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
          },
    
    
          flitterData(arr) {
            let spanOneArr = [],
              spanTwoArr = [],
              concatOne = 0,
              concatTwo = 0;
            arr.forEach((item, index) => {
              if (index === 0) {
                spanOneArr.push(1);
                spanTwoArr.push(1);
              } else {
                if (item.userId === arr[index - 1].userId) { //第一列需合并相同内容的判断条件
                  spanOneArr[concatOne] += 1;
                  spanOneArr.push(0);
                } else {
                  spanOneArr.push(1);
                  concatOne = index;
                }
                if (item.getTime === arr[index - 1].getTime && item.userId === arr[index - 1].userId) {//第二列需合并相同内容的判断条件
                  spanTwoArr[concatTwo] += 1;
                  spanTwoArr.push(0);
                } else {
                  spanTwoArr.push(1);
                  concatTwo = index;
                }
              }
            })
            return {
              one: spanOneArr,
              two: spanTwoArr,
            }
          },
    
    
    
    }

    大功告成了

  • 相关阅读:
    C语言ASM汇编内嵌语法
    Linux下安装安装arm-linux-gcc
    苹果手机(ios系统)蓝牙BLE的一些特点
    蓝牙BLE数据包格式汇总
    蓝牙BLE4.0的LL层数据和L2CAP层数据的区分与理解
    nrf52840蓝牙BLE5.0空中数据解析
    nrf52840蓝牙BLE5.0空中速率测试(nordic对nordic)
    nrf52832协议栈S132特性记录
    使用 Open Live Writer 创建我的第一个博文
    Codeforces Round #691 (Div. 2) D
  • 原文地址:https://www.cnblogs.com/weiweiyeyu/p/15525198.html
Copyright © 2011-2022 走看看