elemen-ui表格默认样式的修改

方法一：通过element-ui里给的属性值修改

查找element-ui的官方文档，找到组件的表属性，其他组件也一样。
比如要改表头行：
利用header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。例子如下：

<el-table :header-cell-style="tableHeaderColor"></el-table>

方法二：通过在style标签里修改

如果不生效，可能是你全局定义了el-table的样式，引起的冲突。可以加上scope，表示只属于当前页，防止样式冲突，不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。如图在style标签中添加scoped：

<style scoped></style>

1、修改表格头部背景

.el-table th{background: #eee;}

2、修改表格行背景

.el-table tr{background: #eee;}

3、修改斑马线表格的背景

.el-table--striped .el-table__body tr.el-table__row--striped td {background: #ccc;}

4、修改行内线的颜色

.el-table td,.building-top .el-table th.is-leaf {border-bottom:  2px solid #eee;}

5、修改表格最底部边框颜色和高度

.el-table::before{border-bottom:  1px solid #ccc;height: 3px}

6、修改表头字体颜色

.el-table thead {color: #ccc;font-weight: 700;}

7、修改表格内容字体颜色和字体大小

.el-table{color: #6B91CE;font-size: 14px;}

8、修改表格无数据的时候背景，字体颜色

.el-table__empty-block{background: #ccc;}
.el-table__empty-text{color: #fff
}

9、修改表格鼠标悬浮hover背景色

.el-table--enable-row-hover .el-table__body tr:hover>td {background-color: #ccc;
}

elemen-ui表格默认样式的修改相关推荐

input 默认样式的修改
/* 修改input选中的默认边框样式 */ outline: none; /* 修改input的选中时的光标颜色 */ caret-color:red; /* 修改input的选中时的默认边框 */ ...
[ElementUI] 修改ElementUI默认样式
前言: 在使用ElementUI中免不了要根据自身需求修改EleUI的默认样式; <div class="form-box"><el-input v-model= ...
element ui 表格滚动条抖动的问题
1. 把.el-table的样式设为:position: absolute .el-table {position: absolute !important; } 2. 把包着表格的父级设为 posi ...
html怎么设置img样式,css默认样式 css中img默认样式问题
css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
Naive UI修改默认样式
一.问题描述因为大创的缘故,需要做出一个网站,在搭建网站的过程中需要使用Naive UI框架,在设置样式的时候一直无法修改默认样式.小白不知道应该如何使用样式穿透,同时和Naive UI相关的博客比 ...
Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
修改表格字体颜色_CAD表格文字样式失灵？不，你错了
CAD也疯狂最近有网友私信,说是插入CAD表格文字样式失灵,不受文字样式控制,插入表格后字体仍然是表格原来的字体.其实CAD插入表格中的文字也是受文字样式控制的,在设置表格样式的时候可以设置使用哪种 ...
ionic 修改组件默认样式_开源Magpie：组件库详解
开源项目专题系列(八)1.开源项目名称:magpie_fly2.github地址: https://github.com/wuba/magpie_fly 3.简介:magpie_fly 是58集体出品 ...

elemen-ui表格默认样式的修改

方法一：通过element-ui里给的属性值修改

方法二：通过在style标签里修改

elemen-ui表格默认样式的修改相关推荐

最新文章

热门文章