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

相关推荐
馬致远15 小时前
Vue 脚手架&环境配置
前端·javascript·vue.js
IT_陈寒15 小时前
React性能优化实战:5个被低估的Hooks技巧让你的应用提速30%
前端·人工智能·后端
SDAU200515 小时前
ESP32C3在Arduino下的MQTT操作
linux·服务器·前端
syt_101315 小时前
grid布局之-子项放置1
前端·javascript·css
HIT_Weston15 小时前
59、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(三)
前端·ubuntu·gitlab
syt_101315 小时前
grid布局之-子项放置2
前端·javascript·css
韩曙亮15 小时前
【Web APIs】JavaScript 动画 ② ( 缓动动画 | 步长计算取整 )
前端·javascript·动画·web apis·缓动动画·匀速动画
fruge15 小时前
Vue3 响应式原理深度解析:Proxy 实现与依赖收集逻辑
前端
by__csdn15 小时前
javascript 性能优化实战:异步和延迟加载
开发语言·前端·javascript·vue.js·性能优化·typescript·ecmascript
by__csdn15 小时前
JavaScript性能优化实战:减少DOM操作全方位攻略
前端·javascript·vue.js·react.js·性能优化·typescript