zoukankan      html  css  js  c++  java
  • 修改el-table滚动条样式

    <include file="Trade:header" />
     <style type="text/css" media="screen">
     	#tradeLeft{
     		 23%;
     		padding: 20px;
    
    
     	}
    
    
       
       /*chrome滚动条颜色设置*/
    
    *::-webkit-scrollbar {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" />
    

      

  • 相关阅读:
    Vijos P1459 车展 (treap 任意区间中位数)
    「BZOJ1691」[Usaco2007 Dec] 挑剔的美食家 (Treap)
    hdu 1540 Tunnel Warfare(Treap)
    hdu 2844 Coins (多重背包+二进制优化)
    hdu 2159 FATE (二维完全背包)
    hdu 2955 Robberies (01背包)
    hdu 2546 饭卡 (01背包)
    hdu 2191 (多重背包二进制优化)
    2019西北工业大学程序设计创新实践基地春季选拔赛 I Chino with Rewrite (并查集+树链剖分+线段树)
    CF895E Eyes Closed (期望)
  • 原文地址:https://www.cnblogs.com/pengc/p/9319307.html
Copyright © 2011-2022 走看看