修改el-table滚动条样式

转载  pengc   2020-09-04   27人阅读  0 条评论
<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" />

image.png

本文地址:https://www.zjh336.cn/?id=1968
温馨提示:文章内容系作者个人观点,不代表华仔部落对观点赞同或支持。
版权声明:本文为转载文章,来源于 pengc ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?