修改el-table滚动条样式

匿名 (未验证) 提交于 2019-12-03 00:41:02
<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" /> 

  

原文:https://www.cnblogs.com/pengc/p/9319307.html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!