修改el-table滚动条样式
<include file="Trade:header" />
<style type="text/css" media="screen">
#tradeLeft{
width: 23%;
padding: 20px; } /*chrome滚动条颜色设置*/ *::-webkit-scrollbar {width:7px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {background-color:#f0f6ff; } /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {background-color:#73abb1; border-radius:6px;} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar{display: none}
.scrollbarShow::-webkit-scrollbar{display: block} </style> <div id="tradeLeft">
<el-tabs v-model="marketlist" type="card" @tab-click="handleClick">
<el-tab-pane label="USDT" name="first"> <el-table stripe height="200" :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}">
<el-table-column prop="date" label="币种" sortable width="100"></el-table-column>
<el-table-column prop="name" label="价格" sortable width="100"> </el-table-column>
<el-table-column prop="name" label="日涨跌" sortable width="100"> </el-table-column>
<el-table-column prop="address" label="自选" :formatter="formatter"></el-table-column>
</el-table> </el-tab-pane>
<el-tab-pane label="BTC" name="second">配置管</el-tab-pane>
<el-tab-pane label="ETH" name="third">角色管理</el-tab-pane>
<el-tab-pane label="自选" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</div> <script> new Vue({
el:"#tradeLeft",
data:{
marketlist: 'first',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海17 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海弄'
}]
},
methods:{
handleClick(tab, event) {
console.log(tab, event);
},
formatter(row, column) {
return row.address;
}
} }); //鼠标划入滚动条展现,鼠标划出滚动条隐藏
function scrollbarShowHidden(element){
element.addClass('scrollbarHide');
element.hover(function() {
element.addClass('scrollbarShow');
}, function() {
element.removeClass('scrollbarShow');
}); } scrollbarShowHidden($('.el-table__body-wrapper')); </script> <include file="Public:footer" />

修改el-table滚动条样式的更多相关文章
- QT修改默认的滚动条样式
这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码.希望能帮到大家 1.写入到文件中,新建个xx.qss,然后复制一下内 ...
- 设置cnblogs默认滚动条样式
默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...
- 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法
资料: http://manos.malihu.gr/jquery-custom-content-scroller/ (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- css修改整个项目的滚动条样式
在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...
- scroll滚动条样式修改
一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll. 当我们需要改变这个滚动条样式的时候,我们需要做以下的修改: html: <div id="style- ...
- chrome和IE下的滚动条样式修改
火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...
- 修改 div 的滚动条的样式
修改 div 的滚动条的样式 需要用到浏览器专属的伪元素,没有万能的办法,支持的浏览器不是很多. 假设有一个(你已经)设好宽高.定好位的 div, <div class="group- ...
- css 溢出滚动条显示,修改滚动条样式
文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...
- css修改浏览器默认的滚动条样式
//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...
随机推荐
- 蓝牙重启case之:hardware error
蓝牙的通信分为host和controller,host端发送数据和命令到controller,controller 上传event以及数据到host端,这要求上下两端的通信要求状态一致性. 当发生状态 ...
- Asp.Net_的传值跟存储值操作
页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...
- if 判断文件
#!/bin/sh#判断文件存在,判断是否为文件夹等testPath="/Volumes/MacBookProHD/Mr.Wen/08 shell命令"testFile=" ...
- 3dmax2020下载安装3dmax2020破解中文版下载安装
3dmax在室内设计.建筑设计领域是最专业的效果图制作软件,也是在游戏动画等领域中在场景方面最专业的软件,目前最新3dmax2020版本已出,我分享亲测好用的软件包,拿走不谢! 3dmax2020安装 ...
- 转载别人的一篇关于git的文章
转载网址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
- Book Review 《构建之法》-2
-敏捷流程包括了几大原则:Backlog.burn-down.Sprint.Scrum. 敏捷开发注重个人之间的交流,提倡尽早的交付有价值的软件满足顾客的需求, 在开发过程中不断与客户进行交互,变化. ...
- Beta阶段冲刺三
Beta阶段冲刺三 Task1:团队TSP 团队任务 预估时间 实际时间 完成日期 新增其他学院的爬虫 180 130 11.30 新增其他学院的数据库字段修改 180 160 12.1 新增其他学院 ...
- [转帖]PG里面的Citus简介----找时间学习一下.
1. Citus是什么 是PostgreSQL的扩展,可以同PG一同安装,之后通过SQL命令加入到数据库中. [相关操作] ? 1 2 #创建Citus扩展: CREATE EXTENSION cit ...
- Docker in Docker的安装 路不通
1. 先启动centos 镜像 然后 再docker cp文件 然后再执行安装报错 [root@CentOS75 ~]# docker run -it centos /bin/bash [root@1 ...
- npm 报错unable to verify the first certificate
npm总是报错:unable to verify the first certificate 原创 2017年09月30日 11:06:10 https://blog.csdn.net/nicexib ...