修改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 ...
随机推荐
- Flutter - ListView禁止用户上下滑动
ListView禁止用户上下滑动可以使用physics属性 physics: const NeverScrollableScrollPhysics()
- yocto-sumo源码解析(二): oe-buildenv-internal
1 首先,脚本先对运行方式进行了检测: if ! $(return >/dev/null 2>&1) ; then echo 'oe-buildenv-internal: erro ...
- PHP学习 文件访问和写入
<?php $path = $_SERVER['PHP_SELF']; //PHP_SELF:当前执行脚本的文件名,与 document root 有关 echo basename($path) ...
- Linux内核分析——第二周学习笔记20135308
第二周 操作系统是如何工作的 第一节 函数调用堆栈 存储程序计算机:是所有计算机基础的框架 堆栈:计算机中基础的部分,在计算机只有机器语言.汇编语言时,就有了堆栈.堆栈机制是高级语言可以运行的基础. ...
- Resharper简单安装及代码覆盖率的测试
Resharper简单安装及代码覆盖率的测试 测试环境:VS 2015 专业版 一.下载Resharper 官方链接:https://www.jetbrains.com/resharper/ 点击下载 ...
- Alpha 冲刺七
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 无进展!!!! 项目 ...
- [问题排查]记录一次两个dubbo提供者同时在线,代码不一致导致问题的排查记录
1. 需求 有一个需求job定时5秒一次,job[消费者]调用dsc[提供者]提供的dubbo完成:先清空redis的某个key,然后再往redis中放入新的数据,这是一个定时任务,需要每隔5秒执行一 ...
- C# Stopwatch获取循环中某操作的时间消耗
在C#中通常使用DateTime来表示当前时间,可以在一个操作的前后分别使用一个DateTime对象获取当前时间,再将两个DateTime对象相减获得时间差(TimeSpan对象),从而得到这个操作耗 ...
- [代码]--IIS发布网站浏览之后看到的是文件目录 & Internal Server Error 处理程序“ExtensionlessUrlHandler-ISAPI-4.0_64bit”在其模块列表中有一个错误模块“IsapiModule” 解决方法 & App_global.asax.pduxejp_.dll”--“拒绝访问。 ”
Q:IIS发布网站浏览之后看到的是文件目录 A:它出现了一个说到.NET4.0 更高框架什么的错误,所以我将 .NTE CRL版本由4.0改为2.0了,改为2.0后就出现了只能浏览文件目录了.改为4. ...
- KD-Tree学习笔记
参考:https://trinkle23897.github.io/pdf/K-D%20Tree.pdf KD-Tree是一种维护K维空间点的类似BST的数据结构.绝大多数时候只用来维护二维空间的点, ...