//控制列 //对象表格控制 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; }