el-table动态渲染背景色，也解决背景透明，文字不透明问题

James clark

于 2022-01-06 16:54:06 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css css3 vue.js

本文链接：https://blog.youkuaiyun.com/jamesclark/article/details/122347658

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中通过自定义`row-style`属性动态设置表格行的背景颜色，并处理透明度问题，以避免影响文字和图片的可读性。通过CSS深度选择器修改表格的背景颜色，实现整体的半透明效果，同时确保文字清晰可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图，设置0.5透明色

请添加图片描述

先显示动态渲染背景颜色

<el-table
          :data="get_userInfoTags"
          style="width: 100%"
          :row-style="tableRowClassName"
        >

添加row-style自定义样式，在methods添加方法

tableRowClassName({ row, rowIndex }) {
      let styleRes = {
        background: this.get_colorArray[rowIndex] + "!important",
        // 'opacity':'0.8'
      };
      return styleRes;
    },

如果直接给opacity透明色，就会导致文字跟图片一样透明，有一种方式是颜色是rgba的，不会影响，不过不适合

css修改样式

/deep/ *{
  color:#000 !important;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: rgba(245, 247, 250, 0.5) !important;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: rgba(245, 247, 250, 0.5) !important;
}

思路就是笼罩灰色，字体颜色加！import，突出字体颜色