vue.js elementUI 表格实现隔行变色，自己定义颜色。(斑马纹表格颜色设置，使两种不同的颜色间隔出现)

最新推荐文章于 2024-04-08 13:59:57 发布

跳跳的小古风

最新推荐文章于 2024-04-08 13:59:57 发布

阅读量7.1k

点赞数 5

分类专栏： Vue 文章标签： vue elementui javascript css html

本文链接：https://blog.csdn.net/weixin_43787651/article/details/112313787

版权

Vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue.js中通过设置`el-table`的`header-cell-style`和`row-class-name`属性来实现表格的表头颜色定制和斑马线样式。关键在于编写`tableRowClassName`函数，根据行索引判断是否为偶数，以返回不同的背景颜色或者自定义类名。注意使用`stripe`属性与`row-class-name`同时存在时可能无法生效。

摘要由CSDN通过智能技术生成

此为效果图

在这里插入图片描述

开始实现

设置表头和斑马线样式

<el-table
      :header-cell-style="{background:'#fff'}"
      //设置表头颜色
      :row-class-name="tableRowClassName"
      //斑马纹表格样式设置
            >
 </el-table>

设置斑马线样式函数

 tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "background:rgba(160,188,231,0.1)";
            } else {
                return "background:rgba(0,8,1,0.1)";
            }
        },
  或
  tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "warning-row"; //类名
            } else {
                return "success-row"; //类名
            }
        },
   //自定义样式
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }