vxe-table表格组件修改行或列的颜色、样式，修改表格框线样式，字体加粗等（el-table同样适用）

最终效果图：

改变某一行的颜色：

在组件中使用：

:row-style="rowStyle"

在method方法中：

根据控制台中输出的row与rowIndex值，找到需要更改的那一行，在if语句中进行书写

rowStyle({row, rowIndex}) {
            console.log('row', row)
            console.log('rowIndex', rowIndex)
            if (rowIndex == 8) {
                return { 'background-color': '#FBE4D5','font-weight': 'bolder!important'}
            }
            if (rowIndex == 7) {
                return { 'font-weight': 'bolder!important'}
            }
        },

效果图：

如果需要完整代码可以在评论区中留言。

改变某一列的颜色：

在组件中使用：

:cell-style="cellStyle"

在method方法中：

根据控制台中的信息，选择需要进行修改的一列

cellStyle({column, columnIndex, row, rowIndex}){
     console.log('columnIndex', columnIndex)
     console.log('column', column)
     console.log('row', row)
     console.log('rowIndex', rowIndex)
    if(columnIndex==1){
          return { 'background-color': '#E2EFD9'}
     }    
}

效果图：

这里可以看到，绿色的列把刚刚设置的橙色的行覆盖住了。

我们只需在if语句中进行如下修改：

if(columnIndex==1 && rowIndex != 8){
    return { 'background-color': '#E2EFD9'}
} 
if(columnIndex==2 && rowIndex != 8){
    return { 'background-color': '#E2EFD9'}
}

现在的效果：

修改表格框的样式：

在<style>标签中：

/deep/ .vxe-body--column {
      border-left: 1px solid #000 !important;
      border-bottom: 1px solid #000 !important;
}
/deep/ th.vxe-header--column{
    border-left: 1px solid #000 !important;
    border-bottom: 2px solid #000 !important;
 
}

并且在组件中加入：

style="border: 1px solid #000;"    //将表格的边框也设置成黑色

效果图：可以看到边框变为了黑色。

最后，如果需要完整代码可以私信或评论我。另外，求大佬指点表格求和！！！