1.场景
在vxe-table的官网API中可以使用footer-cell-class-name给单元格添加背景颜色或者其他样式,但是本人场景进行了表尾合并的操作;参考API进行更改背景颜色失败;
2.解决
利用表尾css类名的区别,用子类选择器进行对应的选择设置对应背景颜色;此方法只适用于固定表格的单元格背景颜色的填充。
<style scoped lang="less">
// 表尾计划与实际背景颜色
/deep/.vxe-footer--row:first-child td:nth-child(1) {
background-color: #fff !important;
}
/deep/.vxe-footer--row:first-child td:nth-child(2) {
background-color: #fff !important;
}
/deep/.vxe-footer--row:first-child{
background-color: #b0e0e1 !important;
}
/deep/.vxe-footer--row:last-child {
background-color: #efbc79 !important;
}
// 表格单元格高度
/deep/.vxe-body--column{
height: 35px !important;
}
//表尾单元格高度
/deep/.vxe-footer--column{
height: 35px !important;
padding:0 !important;
}
</style>