element ui ---table中，单独改变某个列或者行的属性

最新推荐文章于 2025-05-22 08:30:00 发布

姜崽

最新推荐文章于 2025-05-22 08:30:00 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_51296646/article/details/108954551

vue前端专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何在Element UI的table组件中，通过设置`cell-style`属性来自定义单元格样式。作者提供了一个方法`columnStyle`，根据`rowIndex`和`columnIndex`来改变特定列的背景颜色，例如将第一列的背景颜色设置为特定值。同时，还探讨了如何通过CSS来去除表格的横线，实现更个性化的表格展示效果。

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

element ui —table中，单独改变某个列或者行的属性例如(改变某个列的背景颜色、去除表格分割线)

1.在el-table中添加

<el-table
      :cell-style="columnStyle"
      :default-sort="{prop: 'id', order: 'descending'}"
      style="width: 100%;">

其中columnStyle是自己写的一个方法

2.在methods里面写方法

columnStyle ({row, column, rowIndex, columnIndex}) {
// if (this.dataList[rowIndex].operateStatus === '验收被驳回') {
        //  return { 'background-color': '#ffeed5' }
       // }
        if (columnIndex === 0) {
        	// 返回去除表格中的横线
          // return 'border: none;'
          // 返回背景颜色
          return 'background-color:#fff9e9;!important'
        }
      }