一、概述

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>

View Code

访问页面，效果如下：

本文参考链接：

https://www.cnblogs.com/nuonuo-D/p/11328439.html

ElementUI table 样式修改相关推荐

修改webkit内核浏览器滚动条样式（修改element-ui table样式）
webkit浏览器css设置滚动条主要有下面7个属性 1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 2. ::-webkit-scrollbar-button 滚动条 ...
elementUi——table组件修改表头和表身行样式——style的使用
今天在做后台管理系统时,遇到一个需求,就是根据表格中每行数据的状态,来渲染背景颜色. 如下图所示:满足一定条件时,背景颜色要改为绿色. row-style的使用 1.在el-table上添加row-s ...
antd table 样式修改
.ant-table-wrapper {width: 98%;height: 100%;position: relative;top: 30px; } .ant-table {background-c ...
element-ui 滚动条样式修改
element ui的滚动条样式很难看这是修改全局的滚动条样式可以添加一下代码 /**修改全局的滚动条*/ /**滚动条的宽度*/ ::-webkit-scrollbar {width: 8p ...
element-ui滚动条样式修改
* 表单高度超出设置的长度时会出现滚动条展示:.el-table__body-wrapper {height: 60rem; //设置固定高度overflow-y: auto; //超出显示滚动条 } ...
(element-ui)el-popover样式修改
源代码: <el-popover class="menu-popover" placement="bottom" trigger="hover& ...
elementui table expand 修改数据
1.我的设计思路是当点击expand箭头后显示出来内容,然后双击(单击也可以,根据自己想法来)某个区域,然后弹窗进行数据修改,然后双向绑定进行数据渲染,点击保存按钮后数据传输到后台进行数据修改 2.看 ...
layer.tips使用+样式修改
文章目录使用--鼠标滑过或移开控制tips的显示和隐藏步1:$('.fujian') ------ 获取需要显示tips的元素步2: $('.fujian').on() ----- 绑定事件步 ...
element-ui table 滚动条样式修改
先看效果: 思路:使用 css 样式修改滚动条  <style>/* 整体样式 */.el-table__body-w ...
Element-UI table表格自定义样式
Element-UI中关于table表格的样式操作自定义列的内容: 需求:在表格最后一栏添加操作按钮通过slot-scope="scope"添加操作按钮,这是专门为我们提供的插 ...

ElementUI table 样式修改

一、概述

二、代码实现

ElementUI table 样式修改相关推荐

最新文章

热门文章