el-table表格回调 cell-style span-method问题

115 阅读1分钟

1.需求描述:将完成、对接中、未对接分三种颜色展示在表格中;

解决方法:el-table列表,每个单元格style的回调,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 element官方解释如图:

image.png

完成效果图:

image.png 代码:

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.需求描述:合并数据中重复行里的列的值;

image.png

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.spanArr[rowIndex]; // 业务需要,二次处理;从处理完的数组里获取
        let _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },