实现的效果如下:第一列相同值合并,合并块加底色
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>