（element-ui）el-table表格使用cell-style改变单元格样式

最新推荐文章于 2025-06-06 15:53:54 发布

weixin_51063441

最新推荐文章于 2025-06-06 15:53:54 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_51063441/article/details/119614103

这篇博客介绍了如何在Vue项目中通过`:cell-style`属性直接绑定样式，实现表格中特定单元格颜色的动态设置。在`methods`中定义`cellStyle`方法，根据数据属性`yoyStatus`和`momStatus`以及列索引`columnIndex`来判断并返回不同的颜色样式，实现了数据驱动视图的灵活展示。

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

直接绑定在el-table标签上

:cell-style="changeCellStyle"

在methods方法里定义

// 表体字体颜色设置
/***
 * row为某一行的除操作外的全部数据
 * column为某一列的属性
 * rowIndex为某一行（从0开始数起）
 * columnIndex为某一列（从0开始数起）
 */


cellStyle({ row, column, rowIndex, columnIndex }) {
     
      if (row.yoyStatus==1 && columnIndex == 6) {
        return 'color: #FF3B4B'
      }
      if (row.momStatus==1 && columnIndex == 7) {
        return 'color: #FF3B4B'
      }
  },