avue实现列合并和动态渲染表格背景色

实现的效果如下：第一列相同值合并，合并块加底色

1、实现列合并

关键代码：:span-method="rowspanMethod"

//html部分
 <avue-crud
      :option="option"
      :data="tableData"
      :table-loading="loading"
      :span-method="rowspanMethod"
      :before-open="beforeOpen"
      @on-load="onLoad"
      @row-update="updateRow"
      @row-save="saveRow"
      @row-del="rowDel"
    >
    </avue-crud>
//js部分
    rowspanMethod({ row, column, rowIndex }) {
      let fields = ["type"];                          //type为想要合并的列prop，还需要换一下this.tableData
      let cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        let prevRow = this.tableData[rowIndex - 1];
        let nextRow = this.tableData[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.tableData[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            row.hbFlag = true;
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },

2、动态渲染表格背景色

关键代码：:cell-class-name="cellStyle"

//html部分
    <avue-crud
      :option="option"
      :data="tableData"
      :table-loading="loading"
      :span-method="rowspanMethod"
      :before-open="beforeOpen"
      :cell-class-name="cellStyle"
      @on-load="onLoad"
      @row-update="updateRow"
      @row-save="saveRow"
      @row-del="rowDel"
    >
    </avue-crud>
//js部分
    cellStyle({ row, columnIndex }) {
      if (row.hbFlag == true && columnIndex == 1 && row.type == "1") {
        return "cell-background-color-one";
      }
      if (row.hbFlag == true && columnIndex == 1 && row.type == "2") {
        return "cell-background-color-two";
      }
      if (row.hbFlag == true && columnIndex == 1 && row.type == "3") {
        return "cell-background-color-three";
      }
      if (row.$index % 2 == 0) {
        return "row-color";
      }
    },
//css部分  
<style>//注意不能写scoped
.row-color {
  background-color: #f1f1f1;
  border-bottom: 1px solid #ebeef5;
}
.cell-background-color-one {
  background-color: #e6a23c3b;
}
.cell-background-color-two {
  background-color: #c3dcef82;
}
.cell-background-color-three {
  background-color: #cfcfcfb5;
}
</style>