la tabla de interfaz de usuario del elemento controla la combinación de columnas y filas y el control del color de fondo de la tabla

//Columna de control 
//Control de tabla de objetos 
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 { 
      //modificación de nombre 
      if(columnIndex===0){
        if (item.r1 === arr[index - 1].r1) { 
          //Condición de juicio de que la primera columna debe fusionar el mismo contenido 
          spanOneArr[concatOne] += 1; 
          spanOneArr.push(0); 
        } else { 
          spanOneArr. push(1); 
          concatOne = index; 
        } 
      }else if(columnIndex===1){ 
        if (item.r2 === arr[index - 1].r2) { 
          // Juicio que la segunda columna necesita combinar la misma condición de contenido 
          spanOneArr[concatOne] += 1; 
          spanOneArr.push(0); 
        } else { 
          spanOneArr.push(1); 
          concatOne = index; 
        } 
      } 
    } 
  }); 
  return {one: spanOneArr}; 
},

// línea de control

arraySpanMethod({fila, columna, índicefila, índicecolumna}) { 
 // alerta(this.flitterData(this.partsList).one[rowIndex]+'\n'+JSON.stringify(fila)+"----"+ '\n'+"-------------"+índicefila+"--"+índicecolumna); 
  if (columnIndex === 1) { 
    const _row = this.flitterData(this.partsList).one[rowIndex]; 
    const _col = _fila > 1 ? 1 : 2; 
    volver [_fila, _columna]; 
  }else if (columnIndex === 2) { 
    const _row = this.flitterData(this.partsList).one[rowIndex]; 
    si(_fila==1){ 
      devuelve [0,0]; 
    } 
  } 
}, 
// 维度内容相同的合并单元格
flitterData(arr) { 
  let spanOneArr = []; 
  sea ​​concatOne = 0; 
  arr.forEach((elemento,
    si (índice === 0) { 
      spanOneArr.push(1); 
    } else { 
      //modificación de nombre 
      if (item.partNameFather === arr[index - 1].partNameFather) { 
        //la primera columna necesita fusionar la mismo contenido La condición de juicio 
        spanOneArr[concatOne] += 1; 
        spanOneArr.push(0); 
      } else { 
        spanOneArr.push(1); 
        concatOne = index; 
      } 
    } 
  }); 
  return { 
    one: spanOneArr 
  }; 
},

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

control de color de fondo

cuerpo

<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

// Cambia el color de fondo de una celda en una columna 
tableCellStyle({row, column, rowIndex, columnIndex }) { 
  //console.log(row); // Básicamente, todo el resto se puede imprimir aquí 
  // Escribe el juicio lógico aquí (Vea lo que necesita) 
  if (columnIndex === 1&&row.oneSign===1&&rowIndex!=0) { 
    return 'background:#ED7D31;color:white;borderColor:#EDEDF2' 
  } 
}

CSS

/profundo/.el-input__inner[Color="tran"]{ 
  fondo: transparente !important; 
  borde: 0px; 
}

Supongo que te gusta

Origin blog.csdn.net/qq_40390762/article/details/127545057
Recomendado
Clasificación