vue3修改el

2023-06-21 09:50| 来源: 网络整理| 查看: 265

学习目标：

后台管理系统中会大量用到表格，我这里用的技术栈是vue3+elementui-plus

例如：要修改表格样式

学习内容：

我这里是全局修改表格样式，一套管理系统中表格风格样式是一样的首先在style文件夹中创建scss文件在这里插入图片描述创建完以后开始修改表格样式代码如下： .el-table tr, .el-table tr:hover { background-color: #16496d; hover效果 color: #fff; }

.el-table tr { border: none !important; }

.el-table { background-color: #071134; 表格背景色 // color: #fff; border: none !important;

} .el-table { –el-table-border-color:none; } .el-table th { background-color: #101d3f !important; 表头背景色 }

.el-table__body tr:hover > td { background: #afddf0 !important; 单元格样式 }

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { border: none !important; 去掉表格底部线条 } .el-table__body-wrapper tr td.el-table-fixed-column–right { background-color: transparent !important; 固定列样式 } 如果要设置各行换色即：在这里插入图片描述

const tableRowClassName = ({ row, rowIndex }) => { if (rowIndex % 2 === 1) { return “warning-row”; } else { return “success-row”; } } 以上就是隔行换色效果图如下所示：在这里插入图片描述

以上就是el-table中elementui-plus表格样式修改代码。

【本文地址】

vue3修改el

vue3修改el

今日新闻

推荐新闻