ElementUI之cell-class-name 使用方法

最新推荐文章于 2025-07-27 20:05:10 发布

gochanTao

最新推荐文章于 2025-07-27 20:05:10 发布

阅读量3.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： element ui cell-class-name

本文链接：https://blog.youkuaiyun.com/Gochan_Tao/article/details/79631592

elementUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ElementUI中的cell-class-name属性为表格单元格添加特定的CSS类，实现条件样式设置。通过具体示例展示了如何根据不同列或单元格内容应用不同的样式。

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

ElementUI之cell-class-name 使用方法

<el-table :data="tableData3" style="width: 100%" :cell-class-name="cell">
      <el-table-column fixed type="index" width="50">
      </el-table-column>
      <el-table-column fixed prop="name" label="名称" width="80">
      </el-table-column>
      <el-table-column prop="date" label="上榜日" width="80">
      </el-table-column>
 </el-table>

    methods: {
      cell({row, column, rowIndex, columnIndex}) {
      //第八列添加 red 类
        if(columnIndex == 7){
          return 'red'
        }
        //某一行其中的一个变量applies值如果大于0，并且在第六列，即确定一个具体的单元格需要确定行和列
        if(parseFloat(row.applies) >0 && columnIndex == 5){
          return 'red'
        }
       }
      }