1.需求描述:将完成、对接中、未对接分三种颜色展示在表格中;
解决方法:el-table列表,每个单元格style的回调,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 element官方解释如图:
完成效果图:
代码:
tableCellStyle({ row, column, rowIndex, columnIndex }) {
// row-当前行 column-当前列 rowIndex-当前行的下标 columnIndex-列的下标
let rowStyle = {};
if (row[column.property] === "完成") {
rowStyle.background = "#5AD8A6";
rowStyle.color = "#000";
} else if (row[column.property] === "对接中") {
rowStyle.background = "#FFA500";
rowStyle.color = "#000";
} else if (row[column.property] === "未对接") {
rowStyle.background = "#D3D3D3";
rowStyle.color = "#000";
}
return rowStyle;
}
2.需求描述:合并数据中重复行里的列的值;
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
let _row = this.spanArr[rowIndex]; // 业务需要,二次处理;从处理完的数组里获取
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},