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

<el-table class="el-table"
  :header-cell-style="{borderColor: '#EDEDF2',background: '#F7F8FA',color: 'black',fontSize: '14px'}"
  border
  :cell-style="tableCellStyle"
>

<el-table-column label="人" width="100" align="center" prop="aa">
  <template slot-scope="scope">
    <el-input type="input" Color="tran" v-model="scope.row.aa" clearable/>
  </template>
</el-table-column>

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;
}