• element UI表格控制列行合并


    //控制列
    //对象表格控制
    objectSpanMethod1({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.flitterData(this.projectTarget,columnIndex).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 维度内容相同的合并单元格
    flitterData(arr,columnIndex) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if(columnIndex===0){
            if (item.r1 === arr[index - 1].r1) {
              //第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          }else if(columnIndex===1){
            if (item.r2 === arr[index - 1].r2) {
              //第二列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1;
              spanOneArr.push(0);
            } else {
              spanOneArr.push(1);
              concatOne = index;
            }
          }
        }
      });
      return {one: spanOneArr};
    },

    //控制行

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
     // alert(this.flitterData(this.partsList).one[rowIndex]+'\n'+JSON.stringify(row)+"----"+'\n'+"-------------"+rowIndex+"--"+columnIndex);
      if (columnIndex === 1) {
        const _row = this.flitterData(this.partsList).one[rowIndex];
        const _col = _row > 1 ? 1 : 2;
        return [_row, _col];
      }else if (columnIndex === 2) {
        const _row = this.flitterData(this.partsList).one[rowIndex];
        if(_row==1){
          return [0,0];
        }
      }
    },
    // 维度内容相同的合并单元格
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.partNameFather === arr[index - 1].partNameFather) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      };
    },

    ========================================================

    背景色控制

    body

    
      
    

    js

    // 改变某一列单元格背景颜色
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      //console.log(row); // 基本都在这里面  其余的可自行打印
      // 这里写逻辑判断(看你是什么需求)
      if (columnIndex === 1&&row.oneSign===1&&rowIndex!=0) {
        return 'background:#ED7D31;color:white;borderColor:#EDEDF2'
      }
    }

    css

    /deep/.el-input__inner[Color="tran"]{
      background: transparent !important;
      border: 0px;
    }
  • 相关阅读:
    个人健康管理系统 JAVA开源项目 毕业设计
    【初试396分】西北工业大学827学长经验分享
    QGIS跨平台编译
    NR 物理层 卷积
    CalBioreagents超全Id 蛋白兔单克隆抗体,助力科研
    c库函数:strrchr使用demo案例
    Linux:Jenkins:GitLab+Maven+Jenkins的部署
    班级网站的设计与实现
    Vsftpd文件传输服务(三种认证模式:匿名开放 、本地用户、虚拟用户)
    【路由优化】基于matlab随机搜索算法优化带有速度的路由网络【含Matlab源码 2046期】
  • 原文地址:https://blog.csdn.net/qq_40390762/article/details/127545057