el-table el-table-item 改变单元格下划线border-bottom的颜色

最新推荐文章于 2024-09-05 11:06:16 发布

mengqudoh

最新推荐文章于 2024-09-05 11:06:16 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/mengqudoh/article/details/131965175

文章介绍了如何在Vue的ElementUI框架中使用el-table组件的cell-class-name属性来动态设置单元格样式。通过在表格标签中添加cell-class-name属性，并在methods中定义相应的函数判断条件，结合CSS（如使用`::v-deep`穿透scoped属性）实现特定行或列的定制化样式，如红色底边线。文章提到了使用row-class-name遇到的问题，以及切换到cell-class-name后的成功解决方案。

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

1.在el-table 中添加cell-class-name 属性

<el-table ref="sonTable" :key="reloadKey" v-loading="loading"  :cell-class-name="cellClassName"  >
</el-table>

2.在style中添加css元素

`.red-border-bottom` 只用这个类名的话 容易造成权重不够

::v-deep .el-table .red-border-bottom {
  border-bottom :1px solid red;
}

3.在method中添加方法

    cellClassName({row, column, rowIndex, columnIndex}){
        if (row.Flag === '1'){//你的限制条件
          return ' red-border-bottom '
        }
    },