element表格样式修改

HTML代码:
<el-table
:data="tableData"
style="width: 100%"
border
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="用户名">
</el-table-column>
<el-table-column
prop="name"
label="角色">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="">设置角色</el-button>
<el-button
size="mini"
type="primary"
@click="">修改密码</el-button>
<el-button
size="mini"
type="warning"
@click="">删除</el-button>
</template>
</el-table-column>
</el-table>
css代码:
.el-table .warning-row {/*表格斑马线*/
    background: #112336;
    }
    .el-table--border, .el-table--group {
    border:none;
    }
    .el-table .success-row {/*表格斑马线*/
        background: #142d53;
    }
    .el-table th{        /*表头颜色渐变*/
        background-image: linear-gradient(#2457a6,#133d7d );
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {/*表格选中颜色*/
        background-color: #70a6d0;
    }
    .el-table::before{/*表底部边框*/
        height: 0px
    }
    .el-table td, .el-table th.is-leaf{/*表格内容样式*/
        font-size:20px;
        border-bottom: 1px solid #112336;
    }
    .el-button--warning {  /*表格操作按钮样式*/
        background-image: linear-gradient(#b1975f,#6d390e );
        border:1px solid;
        border-color:#a77b45;
        border-radius:9px;
    }
    .el-button--primary {  /*表格操作按钮样式*/
        background-image: linear-gradient(#3487fe,#083d88 );
        border:1px solid;
        border-color:#548fe7;
        border-radius:9px;
    }
     .el-table th>.cell {/*表头样式*/
        text-align: center;
        color:#fff;
        font-size:22px
   }
     .el-table .cell{/*表格数据样式*/
        text-align: center;
         color:#bfbfbf
   }
element表格样式修改的更多相关文章
- 解决vue中element组件样式修改无效
		vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ... 
- ANT 的Table表格样式修改方法
		注:(大家在给页面添加参数或者方法的时候,记得写上注释,方便别人查看) 1.表格行选中样式添加:(可以去beijing,精子库质控统计查看例子) (咱们以前页面上的表格都是在hover时显示选中效果, ... 
- 设置element表格透明样式
		1.element table 表格 修改背景为透明并去除边框 .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px s ... 
- Excel图表编辑---表格移动,样式修改
		一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ... 
- vue+Elment-UI,修改element组件样式
		在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ... 
- ExtJS控件样式修改及美化
		Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ... 
- word建立统一的表格样式
		插入一个表格,一般border都是一样粗细,不美观, 这里推荐一种样式如下图(外框和首行都加粗,比较好看) 设置方法: 1.选中表格,上方出现设计选项卡 2.表格样式,点击"新建样式表&qu ... 
- 关于element-ui表格样式设置的方法cell-class-name
		关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ... 
- 更改ligerui源码实现分页样式修改
		修改后样式: 第一步:实现功能. 更改源码部分ligerui.all.js文件 读源代码,发现ligerui底部工具条是这样实现的(ps:注释部分为源码) _render: function () { ... 
- 如何去掉bootstrap table中表格样式中横线竖线
		修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ... 
随机推荐
- Spring 装配基础类型
			1 //以String类型为例 2 <bean id="exemptSecretUser" class="java.lang.String"> 3 ... 
- Yii2安装步骤
			通过 Composer 安装了半天一直网络报错,配置了镜像,又报错依赖,运行跳过依赖,这个命令还是报错,我裂开. 最后只能利用归档文件安装,1.下http://www.yiiframework.com ... 
- Python 的入门学习之 Day4~6 ——from”夜曲编程“
			Day 4 time: 2021.8.1. 打卡第四天.今天起得很早(7点多一些),很棒,而梳头发更快些就更好了.我也算渐渐养成了晨间学习的习惯吧,一起床就心心念念着Python课程,这让我感觉到了生 ... 
- CSS之 font
			font:font-style font-weight font-size/line-height font-family的简写.顺序不能乱 **eg ** font:italic bold 30px ... 
- 【JavaScript】JS写法随笔(一) Ajax写法
			$("#btn").click(function () { var wanted_code = $("#wanted_code").children('opti ... 
- AX2012 使用HTML自定义popup内样式
			在Class Box下新增方法如下: public client static DialogButton yesNoHTML( str _text, DialogButton _defaultButt ... 
- HTTP协议中的长连接和短链接
			一.概念 HTTP长连接,也称持久连接,是使用同一个TCP连接来发送和接受多个HTTP请求/应答,而不是位每一个新的请求/应答打开新的TCP连接.这种方式由于通信连接一直存在,此种方式常用于P2P通信 ... 
- Leetcode61
			!!Given the head of a linked list, rotate the list to the right by k places.!! # Definition for si ... 
- 连接打印机Lodop
			<div class="panel-body"> <div class="row show-grid"> <div class=& ... 
- nrm ls报错及npm镜像站点测速、切换
			报错截图: 解决方法: 1.win键,搜索powershell,点击"以管理员身份运行" 2.粘贴下面命令,回车,敲y,回车 set-ExecutionPolicy RemoteS ... 
