element-plus的表格固定列不变颜色的解决办法

前言:有的行需要变颜色 所以我们用到了row-class-name方法 但是固定列没有变颜色

<el-table :row-class-name="tableRowClassName">xxx</el-table>
const tableRowClassName = (value) => {
  if (JSON.stringify(row.stopApplyType) != 'null') {
    console.log('停发')
    return 'error-row'
  } else {
    return ''
  }
}
<style>
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
</style>

element-plus的表格固定列不变颜色的解决办法_第1张图片
这样是非常不美观的 所以我看了一下固定列的css 绑定的class
然后我们在app.vue加入以下代码
.el-table-fixed-column–left 是针对固定在左侧的固定列
.el-table-fixed-column–right 是针对固定在右侧的固定列

//红色的
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .error-row .el-table-fixed-column--left {
  background-color: #fef0f0;
}
.el-table .error-row .el-table-fixed-column--right {
  background-color: #fef0f0;
}

element-plus的表格固定列不变颜色的解决办法_第2张图片
这样的话就变美观了很多 解决问题!

你可能感兴趣的:(前端,elementui,javascript,开发语言,ecmascript)