elementui表格复杂操作
1.elementui表格最后一行加粗显示
表格table加以下属性
:cell-style="cellStyleModify"
methods方法实现:
cellStyleModify({row,column,rowIndex,columnIndex}){ let fontStyle = null; if( row.ggmc.includes('合计')){ fontStyle = 'font-weight:700'; return fontStyle; }else{ fontStyle = 'text-align:center'; return fontStyle; } },
2.elementui表格数据动态跨行合并
1.查询出表格数据后执行下面方法,为表格行合并数据做准备
// 为表格行合并准备数据 getRowList() { this.rowList = [] this.rowListpos = 0 let data = this.configData data.forEach((item, index, arr) => { // 表格第一行必须保留 if (index === 0) { this.rowList.push(1) this.rowListpos = 0 } else { // 判断指标类别当前行与指标类别上一行是否相同 如果相同则合并 if (item.zblb === arr[index - 1].zblb) { this.rowList[this.rowListpos] += 1 //需要合并的行数累加1 this.rowList.push(0) } else { this.rowList.push(1) this.rowListpos = index } } }) },
2.在表格table加上如下属性
:span-method="objectSpanMethod"
methods方法实现
//跨行 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (this.rowList[rowIndex]) { let rowNum = this.rowList[rowIndex] return { rowspan: rowNum, colspan: rowNum > 0 ? 1 : 0 } } else { return { rowspan: 0, colspan: 0 } } } },
一点点学习,一丝丝进步。不懈怠,才不会被时代所淘汰!