• 修改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" />
    

      

  • 相关阅读:
    分布式文件系统 ~MogileFS~
    使用HAproxy如何实现web站点的动静分离
    MySQL 服务器变量 数据操作DML-视图
    MySQL 查询缓存
    NGINX 如何防盗链
    Apache 如何反向代理tomcat并且实现Session保持
    Linux 内核编译步骤及配置详解
    NGINX如何反向代理Tomcat并且实现Session保持
    LogStash日志分析系统
    bash编程之 ~制作Mini Linux系统~
  • 原文地址:https://www.cnblogs.com/pengc/p/9319307.html
Copyright © 2020-2023  润新知