<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滚动条样式的更多相关文章

  1. QT修改默认的滚动条样式

    这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码.希望能帮到大家 1.写入到文件中,新建个xx.qss,然后复制一下内 ...

  2. 设置cnblogs默认滚动条样式

    默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

  3. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  4. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  5. css修改整个项目的滚动条样式

    在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-web ...

  6. scroll滚动条样式修改

    一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll. 当我们需要改变这个滚动条样式的时候,我们需要做以下的修改: html: <div id="style- ...

  7. chrome和IE下的滚动条样式修改

    火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html&g ...

  8. 修改 div 的滚动条的样式

    修改 div 的滚动条的样式 需要用到浏览器专属的伪元素,没有万能的办法,支持的浏览器不是很多. 假设有一个(你已经)设好宽高.定好位的 div, <div class="group- ...

  9. css 溢出滚动条显示,修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  10. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

随机推荐

  1. centos7 php性能调优

    php-ini优化 vi /etc/php.ini 打开php的安全模式,控制php执行危险函数, 默认是Off,改为On sql.safe_mode = Off 关闭php头部信息, 隐藏版本号, ...

  2. kubeadm安装K8S单master双节点集群

    宿主机:master:172.16.40.97node1:172.16.40.98node2:172.16.40.99 # 一.k8s初始化环境:(三台宿主机) 关闭防火墙和selinux syste ...

  3. leetcode之有序数组的平方

    题目描述: 给定一个按非递减顺序排序的整数数组 A,返回每个数字的平方组成的新数组,要求也按非递减顺序排序. 示例 1: 输入:[-4,-1,0,3,10] 输出:[0,1,9,16,100] 示例 ...

  4. PBFT_拜占庭容错算法

    根据论文<Practical Byzantine Fault Tolerance and Proactive Recovery>整理 Practical byzantine fault t ...

  5. DRF框架QQ登录功能

    用户模块---QQ登录 流程图 QQ登录文档:http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0 流程简述 ...

  6. 日本厚劳省对IT技术人员展开确保海外人才调查

    新浪美股讯 5月13日消息,共同社报道,日本厚生劳动省将开始对在国内工作的外国籍系统工程师(SE)及程序员的劳动条件进行实际状况调查.为避免在与海外的人才获取竞争中败北,希望掌握接纳企业的需求等推动企 ...

  7. PHP Laravel 连接并访问数据库

    第一次连接数据库 数据库配置位于config/database.php数据库用户名及密码等敏感信息位于.env文件创建一个测试表laravel_course <?php namespace Ap ...

  8. Selenium--调用js,对话框处理 (python)

    前言: 本次教程针对Python语言,selenium教程(调用js,对话框处理) 一.对话框处理 更多的时候我们在实际的应用中碰到的并不是简单警告框,而是提供更多功能的会话框. 本节重点: 1.打开 ...

  9. ace -- about

    Built for Code Ace is an embeddable code editor written in JavaScript. It matches the features and p ...

  10. 2017-2018 第一学期201623班《程序设计与数据结构》-第9&10周作业问题总结

    一.作业内容 第8周作业 http://www.cnblogs.com/rocedu/p/7484252.html#WEEK08 第9周作业 http://www.cnblogs.com/rocedu ...