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>

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

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

相关推荐
小离a_a1 小时前
根据图片远程地址复制图片内容,可以在富文本、word等文本里粘贴
开发语言·前端·javascript
宇寒风暖4 小时前
@(AJAX)
前端·javascript·笔记·学习·ajax
Giser探索家9 小时前
低空智航平台技术架构深度解析:如何用AI +空域网格破解黑飞与安全管控难题
大数据·服务器·前端·数据库·人工智能·安全·架构
gnip10 小时前
前端实现自动检测项目部署更新
前端
John_ToDebug10 小时前
JS 与 C++ 双向通信实战:基于 WebHostViewListener 的消息处理机制
前端·c++·chrome
gnip11 小时前
监听设备网络状态
前端·javascript
As331001012 小时前
Chrome 插件开发实战:打造高效浏览器扩展
前端·chrome
xrkhy12 小时前
nvm安装详细教程(卸载旧的nodejs,安装nvm、node、npm、cnpm、yarn及环境变量配置)
前端·npm·node.js
德育处主任13 小时前
p5.js 3D盒子的基础用法
前端·数据可视化·canvas
前端的阶梯13 小时前
为何我的figma-developer-mcp不可用?
前端