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

修改el-table滾動條樣式