element UI table controls column and row merging and table background color control

// control column
// object form control
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
    };
  }
},
// merged cells with the same dimension content
flitterData(arr,columnIndex) {
  let spanOneArr = [];
  let concatOne = 0;
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1);
    } else {
      //name modification
      if(columnIndex===0){
        if (item.r1 === arr[index - 1].r1) {
          //The first column needs to merge the judgment conditions of the same content
          spanOneArr[concatOne] += 1;
          spanOneArr.push(0);
        } else {
          spanOneArr.push(1);
          concatOne = index;
        }
      }else if(columnIndex===1){
        if (item.r2 === arr[index - 1].r2) {
          //The second column needs to merge the judgment conditions of the same content
          spanOneArr[concatOne] += 1;
          spanOneArr.push(0);
        } else {
          spanOneArr.push(1);
          concatOne = index;
        }
      }
    }
  });
  return {one: spanOneArr};
},

// control line

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];
    }
  }
},
// merged cells with the same dimension content
flitterData(arr) {
  let spanOneArr = [];
  let concatOne = 0;
  arr.forEach((item, index) => {
    if (index === 0) {
      spanOneArr.push(1);
    } else {
      //name modification
      if (item.partNameFather === arr[index - 1].partNameFather) {
        //The first column needs to merge the judgment conditions of the same content
        spanOneArr[concatOne] += 1;
        spanOneArr.push(0);
      } else {
        spanOneArr.push(1);
        concatOne = index;
      }
    }
  });
  return {
    one: spanOneArr
  };
},

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

background color control

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

// Change the background color of a column cell
tableCellStyle({ row, column, rowIndex, columnIndex }) {
  //console.log(row); //Basically everything is here and the rest can be printed by yourself
  // Write logical judgment here (see what you need)
  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;
}