• 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;
    }
  • 相关阅读:
    电脑桌面删除的文件回收站没有,电脑上桌面删除文件在回收站找不到怎么办
    【MySQL】子查询详解
    [java刷算法]牛客—剑指offer树的子结构,对称树,树的镜像
    Rollup打包导入assert、path、util、fs模块
    Java:垃圾收集 CPU 统计信息
    Java学习笔记(十四)
    如何编写lua扩展库
    基于javaweb+mysql数据库实现的学生选课管理系统项目源代码
    使用golang+antlr4构建一个自己的语言解析器(二)
    MFC:字符串处理
  • 原文地址:https://blog.csdn.net/qq_40390762/article/details/127545057