element表格el-table对指定行设置背景颜色

示例:对当天(星期几)的数据设置背景色

使用 :row-class-name 实现

html 复制代码
<el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
    <el-table-column prop="week" label="星期" width="180" align="center">
    </el-table-column>
	...
</el-table>

如果该行数据的星期是当天,则返回样式 choose-row

js 复制代码
//指定行颜色
tableRowClassName: function ({ row, rowIndex }) {
    if (row.week == this.week) {
        return 'choose-row';
    }
},
html 复制代码
<style>
    .choose-row {
        background-color: #f5f7fa !important;
    }
</style>

更多技术干货,请持续关注程序员大佬超。

原创不易,转载请注明出处。

相关推荐
用户45820315317几秒前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css
月弦笙音2 分钟前
【Vue组件】封装组件该考虑的核心点
前端·javascript·vue.js
清风细雨_林木木2 分钟前
HttpOnly 是怎么防止 XSS 攻击的?
前端·xss
用户2519162427114 分钟前
Node之单表基本查询
前端·javascript·node.js
文心快码BaiduComate6 分钟前
基于YOLOv8的动漫人脸角色识别系统:Comate完成前端开发
前端·后端·前端框架
需要兼职养活自己7 分钟前
react 之redux
前端·react.js·redux
ら陈佚晨11 分钟前
React 18 的核心设计理念:并发渲染
前端·javascript·react.js·前端框架·fiber
草字1 小时前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app
EF@蛐蛐堂1 小时前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
洋不写bug1 小时前
前端html基础标签
前端·html