elementPlus-table 设置斑马纹背景颜色不生效问题

最新推荐文章于 2024-03-13 16:54:39 发布

海带先森

最新推荐文章于 2024-03-13 16:54:39 发布

阅读量758

点赞数

分类专栏： ElementPlus 文章标签： elementui

本文链接：https://blog.csdn.net/qq_43106691/article/details/131923543

版权

ElementPlus 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

elementPlus-table 设置斑马纹背景颜色不生效问题

在这里插入图片描述
解决方案：

去除 stripe 属性采用 JS 判断方式

//html 部分
<el-table
  ref="table"
  border
  :data="tableData"
  @selection-change="handleSelectionChange"
  style="width: 100%"
  :row-style="TableRowStyle"
/>

//表格样式
const TableRowStyle = ({ rowIndex }: { rowIndex: number }) => {
  if (rowIndex % 2 !== 1) {
    return {
      background: 'linear-gradient(90deg, rgba(60, 197, 255, 0.1) 0%, rgba(59, 190, 255, 0.02) 100%)'
    }
  }
  return { background: 'linear-gradient(90deg, rgba(23, 50, 81, 1) 0%, rgba(59, 190, 255, 0.02) 100%)' }
}