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设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...
随机推荐
- Python中用eval将字符串转换为字典时候出错:NameError: name ‘null’ is not defined的解决方法
这两天在用python调用接口时,因为接口返回的是str类型的数据,形如: 因为这样的str类似字典,所以我想把它转为字典以便处理,使用的是eval来进行转换,如下: <pre name=& ...
- Python中用requests处理cookies的3种方法
在接口测试中,大多数项目的接口是需要登录后进行操作的,经常用到requests库进行模拟登录及登录后的操作,下面是我不断踩坑后总结出来的关于登录凭证cookies的3种操作方法. 一. 用 reque ...
- 无法加载文件 D:\lunwen\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。visual code页面vue ui启动失败
报如下错误 解决方法: 1.以管理员身份运行 Windows PowerShell(管理员)点击win键 搜索powershell 点击以管理员身份运行 如下图所示 2.输入 set-Executio ...
- 一步一步教你FasterRunner在Centos7服务器部署
一,搭建环境的安装版本 centos ,mysql-5.7.22,node-v9.8.0,Python-3.6.2(注意mysql版本,因为django需要跟mysql兼容) 二,linux 环境的搭 ...
- Windows 进程间通信 共享内存
向内存中写数据 1 // SharedMemorySample_write_main.cpp 2 #include <SDKDDKVer.h> 3 #include <Windows ...
- 开发Unity3D移动端输入插件 UGUI Touch Input Component
UGUI Touch Input Component 为了在移动设备上操控角色,本人便开发了UGUI Touch Input Component输入类插件. 特点 本插件中总共包含三种组件:the v ...
- WPF Binding表达式
前言: WPF BindingBinding表达式的使用,可以很方便的绑定参数和更新界面数据. 1.界面添加控件,并设置对应属性的Binding表达式,例如: <Window x:Class=& ...
- ORA-01427: 单行子查询返回多个行 出现原因及对应防止措施
原因:没有做好子查询约束条件 解决方法:1.加 AND ROWNUM =1 条件 但筛选结果可能并非一定是你想要的 2.匹配查询唯一约束条件
- 【LeetCode】——分割回文串II
继续与动态规划斗智斗勇... 132. 分割回文串 II - 力扣(LeetCode) (leetcode-cn.com) 分析:记f[i]表示将字符串s[0:i]分割的最小次数.我们需要将列举出在[ ...
- 2022/7/28 第七组陈美娜 API类
API:Application Program Interface应用程序接口 JDK给我们提供的一些已经写好的类,可以直接调方法来解决问题 类的方法在宏观上都可以称为接口 接口:1.interfac ...