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表格样式修改的更多相关文章

  1. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  2. ANT 的Table表格样式修改方法

    注:(大家在给页面添加参数或者方法的时候,记得写上注释,方便别人查看) 1.表格行选中样式添加:(可以去beijing,精子库质控统计查看例子) (咱们以前页面上的表格都是在hover时显示选中效果, ...

  3. 设置element表格透明样式

    1.element table 表格 修改背景为透明并去除边框 .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px s ...

  4. Excel图表编辑---表格移动,样式修改

    一.移动位置和调整大小 先鼠标选中如下面这个图片,之后点击上方的设计按钮,随后选择右边的, 再选择,就可以实现图片的表格之间的移动. 其中移动图表里面的,选中这个之后,图表的大小会根据窗口的大小自动调 ...

  5. vue+Elment-UI,修改element组件样式

    在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该 ...

  6. ExtJS控件样式修改及美化

    Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...

  7. word建立统一的表格样式

    插入一个表格,一般border都是一样粗细,不美观, 这里推荐一种样式如下图(外框和首行都加粗,比较好看) 设置方法: 1.选中表格,上方出现设计选项卡 2.表格样式,点击"新建样式表&qu ...

  8. 关于element-ui表格样式设置的方法cell-class-name

    关于element-ui表格使用的一些方法 最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台 ...

  9. 更改ligerui源码实现分页样式修改

    修改后样式: 第一步:实现功能. 更改源码部分ligerui.all.js文件 读源代码,发现ligerui底部工具条是这样实现的(ps:注释部分为源码) _render: function () { ...

  10. 如何去掉bootstrap table中表格样式中横线竖线

    修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些. 应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴 ...

随机推荐

  1. 765. 情侣牵手 (Hard)

    问题描述 765. 情侣牵手 (Hard) n 对情侣坐在连续排列的 2n 个座位上,想要牵到对方的手. 人和座位由一个整数数组 row 表示,其中 row[i] 是坐在第 i 个座位上的人的 ID. ...

  2. Linux系统备份与还原——dump备份命令

    dump是Linux下非常好用的备份工具,系统默认没有安装该工具,可以通过yum来安装使用 [root@localhost ~]# rpm -qa |grep dump [root@localhost ...

  3. TypeScript 声明文件

    TypeScript 声明文件 TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库.虽然通过直接引用可以调用库的类和方法,但是 ...

  4. 学习lua-01,遍历集合,多入参循环处理,类型判断,数字运算

    --function maxnum(tab1) -- local b = 1 -- local a = tab1[b] -- for i, v in ipairs(tab1) do -- if v & ...

  5. Flink生产数据到Kafka频繁出现事务失效导致任务重启

    在生产中需要将一些数据发到kafka,而且需要做到EXACTLY_ONCE,kafka使用的版本为1.1.0,flink的版本为1.8.0,但是会很经常因为提交事务引起错误,甚至导致任务重启 kafk ...

  6. Study python_02

    分支结构 简单的使用if语句 使用if-else import random# 调用一个随机数包(只看if的情况可忽略) n1 = random.randrange(100) n2 = random. ...

  7. sign签名

    $sign = array( 'ip'=>'1.15.23.31' // array('ip'=>'2.34.45.34'), ); $ip = setSign($sign); for ( ...

  8. Spark RDD编程

    1. 准备文本文件从文件创建RDD lines=sc.textFile()筛选出含某个单词的行 lines.filter()lambda 参数:条件表达式 2. 生成单词的列表从列表创建RDD wor ...

  9. 2022 ICPC沈阳合肥游记

    选赛区的时候很争议,除了沈阳是确定要选,队友对于合肥新赛区的看法很质疑,但我想选合肥,一是觉得人少,二是觉得强队会少,因为隔壁CCPC.然后就选了合肥,看情况选合肥确实很对. 一开始也不认为会拿牌,后 ...

  10. 监控室NTP/GPS同步时钟解决方案

    深圳市立显电子有限公司,专业LED时钟生产厂家!--------[点击进入]  车站.机场.学校等场所监控室布置要求:   1.宜选择建筑物中环境噪声较小的声场所.如车站票务中心后台.机场保安值班室. ...