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