ElementUI table 样式修改

一、概述

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"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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