element-ui table修改斑马条纹颜色

原创

爱划水de鲸鱼哥 2022-08-09 23:11:59 博主文章分类：前端 ©著作权

文章标签 属性值回调方法示例代码 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者爱划水de鲸鱼哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

最近在工作中用到了element-ui，修改table斑马条纹颜色属实是花了些时间。总结出来分享给大家，希望可以帮到有需要的人。

带斑马纹的表格

在<el-table>标签上添stripe 属性可以创建带斑马纹的表格。stripe 属性默认是true。

    <el-table stripe>

修改斑马条纹颜色

首先，在<el-table>标签上添加row-class-name属性，row-class-name是列表行的回调方法，可以使用为所有行设置一个固定的 className。

    <el-table stripe :row-class-name="onTableRowClassName">

row-class-name属性值可以是一个字符串也可以是函数function({ row, rowIndex })；

第一个参数 row 是当前行的数据, 第二个参数 rowIndex 是列表的当前行数。

注意：

row-class-name是属性不是方法，使用在<el-table>标签上是:row-class-name="xxx",而不是@row-class-name="xxx"。

然后，在绑定的方法中为偶数行（包含第0行）添加上对应的className；

const onTableRowClassName = ({row, rowIndex})=>{
    if (rowIndex%2==0) {
    return 'statistics-warning-row';
  } else {
    return '';
  }
}

最后，找到选择器的位置，修改成想要的样式即可。

  .el-table__row.statistics-warning-row .cell {
    background: #00ff00;
  }

页面效果

示例代码

<template>
  <el-table :data="tableData" stripe style="width: 100%" :row-class-name="onTableRowClassName">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2022-08-08',
    name: '张三',
    address: '北京市',
  },
    {
    date: '2022-08-08',
    name: '张三',
    address: '北京市',
  },
    {
    date: '2022-08-08',
    name: '张三',
    address: '北京市',
  },
    {
    date: '2022-08-08',
    name: '张三',
    address: '北京市',
  },
]
const onTableRowClassName = ({row, rowIndex})=>{
    if (rowIndex%2==0) {
    return 'statistics-warning-row';
  } else {
    return '';
  }
}
</script>

<style>
  .el-table .cell {
    color: #fff;
    background: #000000;
  }
  .el-table__row.statistics-warning-row .cell {
    background: #00ff00;
  } 
</style>