elementUI中table的row-class-name和cell-class-name

我们现在有一个需求,要求指定的行是一个颜色,突出显示重要性,这时候可以使用el-table的row-class-name属性,

因为我是需要再行内传参,所以使用的是这个写法,如果不需要传参,直接如下即可:

复制代码
:row-class-name="editCellClassName"

然后如下,给符合条件的行加上一个样式,然后在样式里面加背景色即可

因为我使用的是scss,所以深度选择器用的是::v-deep,如果使用的是less,也可以用/deep/

但是现在需求改变,觉得一整行都是这个颜色,不太好看,想要符合条件的行的指定列背景色改变,这时候可以使用cell-class-name的属性,写法都是差不多的,只不过cell-class-name的第一个参数的对象里面,是四个属性{row, column, rowIndex, columnIndex},这个时候可以通过rowIndex和columnIndex同时去筛选出符合条件的添加指定样式

相关推荐
Code_Dragon1 分钟前
最近遇到的bug
linux·前端
言兴1 分钟前
从输入 URL 到页面显示:深入理解浏览器缓存机制
前端·javascript·面试
讨厌吃蛋黄酥1 分钟前
前端跨域难题终结者:从JSONP到CORS,一文搞定所有跨域问题!
前端·javascript·后端
阿星做前端2 分钟前
coze源码解读:项目启动
前端·javascript
言兴3 分钟前
面试题之解析“类组件”与“组件”的本质
前端·javascript·面试
Jessica07063 分钟前
【Vue3+Element Plus】修改el-table树形结构的默认箭头样式
前端
excel4 分钟前
前端布局避坑指南:Grid、Flex 与传统 CSS2 布局的优缺点全解析
前端
潘小安6 分钟前
『译』2025 年 MCP 工具终极指南:6 款颠覆性 AI 开发工具,让你的生产力提升 10 倍
前端·ai编程·mcp
小林的技术分享6 分钟前
关于排查 Flutter 3.27.0 版本Android端无法禁用Impeller引擎的过程记录
前端·flutter
南篱7 分钟前
React 受控 vs 非受控组件:核心概念解析
前端·面试