vue3修改el-table样式

学习目标：

后台管理系统中会大量用到表格，我这里用的技术栈是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表格样式修改代码。