修改el-table滚动条样式
<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" />