发布时间:2021-03-05 16:16:00编辑:admin阅读(3473)
element-ui table 默认是白色背景,现在需要修改为黑色背景,白色文字。
css样式
<style> /*修改table 的背景颜色和文字颜色*/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{ border-color: black; background-color: black; color: white; } /*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/ .el-table tbody tr:hover>td { background-color:black!important } </style>
test.vue
<template> <div style="width: 70%;margin-left: 30px;margin-top: 30px;"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } } } </script> <style> /*修改table 的背景颜色和文字颜色*/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{ border-color: black; background-color: black; color: white; } /*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/ .el-table tbody tr:hover>td { background-color:black!important } </style>
访问页面,效果如下:
本文参考链接:
https://www.cnblogs.com/nuonuo-D/p/11328439.html
46331
44182
35671
33222
27927
24493
23432
18636
17873
16557
4387°
4956°
4494°
4642°
5305°
4258°
4317°
4865°
4754°
5968°