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

相关推荐
盟接之桥几秒前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
巴拉巴拉~~2 分钟前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
韭菜炒大葱26 分钟前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
有意义32 分钟前
从 useState 到 useEffect:React Hooks 核心机制详解
javascript·react.js·前端工程化
栀秋66634 分钟前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose36 分钟前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有点笨的蛋37 分钟前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js
Zyx200739 分钟前
手写 `instanceof`:深入理解 JavaScript 原型链与继承机制
javascript
盖头盖44 分钟前
【nodejs中的ssrf】
前端
江城开朗的豌豆1 小时前
TypeScript和JavaScript到底有什么区别?
前端·javascript