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同时去筛选出符合条件的添加指定样式

相关推荐
努力早日退休几秒前
Antd Image标签父元素会比图片本身高几个像素的原因
前端
林希_Rachel_傻希希几秒前
手写Promise--教学版本
前端·javascript·面试
ETA84 分钟前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
呼叫69454 分钟前
图片列表滚动掉帧的原因分析与解决方案
前端
狗哥哥8 分钟前
AI 驱动前端自动化测试:一套能落地、能协作、能持续的工程化方案
前端·测试
全栈老石11 分钟前
别再折腾端口转发了:使用 Cloudflare Tunnel 优雅地分享你的 localhost
前端·后端·全栈
码云之上16 分钟前
WEB端小屏切换纯CSS实现
前端·css
Java编程爱好者17 分钟前
JUnit 5 中的 @ClassTemplate 实战指南
javascript
LaughingDangZi30 分钟前
vue+java分离项目实现微信公众号开发全流程梳理
java·前端·后端