修改el-table滚动条样式

Posted 2020-12-04 pengc

<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" />