右侧滚动条

src/components/HistoryRecord.vue

@@ -7,54 +7,25 @@
             <span class="link" @click="link(historyRs.Url)">
                 more+
             </span>
-            <el-table
-                    :data="tableData"
-                    stripe
-                    :default-sort="{prop: 'date', order: 'descending'}"
-                    style="width: 100%">
-                <el-table-column
-                        prop="Oem"
-                        label="名称"
-                        width="140"
-                        align="center"
-                >
+            <el-table :data="tableData" stripe :default-sort="{prop: 'date', order: 'descending'}" height="150px"
+                style="width: 100%">
+                <el-table-column prop="Oem" label="名称" width="140" align="center">
                     <template slot-scope="scope">
                         <el-tooltip class="item" effect="dark" :content="scope.row.Oem" placement="top-start">
                             <span v-if="scope.row.Oem">
-                                    {{ scope.row.Oem.length > 9 ?  scope.row.Oem.substr(0,9)+'...' : scope.row.Oem }}
+                                {{ scope.row.Oem.length > 9 ? scope.row.Oem.substr(0,9)+'...' : scope.row.Oem }}
                             </span>
                             <span v-else>
                                 未知
                             </span>
-
                         </el-tooltip>
                     </template>
                 </el-table-column>
-                <el-table-column
-                        prop="UpdateAt"
-                        label="时间"
-                        sortable
-                        :formatter="filterTime"
-                >
+                <el-table-column prop="UpdateAt" label="时间" sortable :formatter="filterTime">
                 </el-table-column>
-                <el-table-column
-                        prop="Type"
-                        label="类型"
-                        sortable
-                        :formatter="filterType"
-                >
+                <el-table-column prop="Type" label="类型" sortable :formatter="filterType">
                 </el-table-column>
             </el-table>
-            <!--<br>-->
-            <!--<div v-show="allTableData.length != 0">-->
-            <!--<el-pagination-->
-            <!--background-->
-            <!--layout="prev, pager, next"-->
-            <!--:total="pageination.total"-->
-            <!--:page-size="pageination.pageItem"-->
-            <!--@current-change="pageChange"-->
-            <!--&gt;</el-pagination>-->
-            <!--</div>-->
         </div>
     </div>
 </template>
@@ -105,7 +76,7 @@
         },
         methods: {
             link(url) {
-                this.$router.push({path: url, query: {x: 0}});
+                this.$router.push({ path: url, query: { x: 0 } });
             },
             // 设置分页数据
             setPaginations() {
@@ -158,8 +129,7 @@
             filterTime(value, row, column) {
                 return filterTimeToString(column);
             }
-        }
-        ,
+        },
     }
 </script>
 
@@ -205,21 +175,26 @@
         color: #6DC1FF;
     }
 
-    .el-table, .el-table__expanded-cell {
+    .el-table,
+    .el-table__expanded-cell {
         background: none;
     }
 
-    /deep/ .el-table th, /deep/ .el-table tr {
+    /deep/ .el-table th,
+    /deep/ .el-table tr {
         background: none;
         color: #6DC1FF;
         border: none;
     }
 
-    /deep/ .el-table td, /deep/ .el-table th.is-leaf {
+    /deep/ .el-table td,
+    /deep/ .el-table th.is-leaf {
         border: none;
     }
 
-    /deep/ .el-button--primary.is-active, /deep/ .el-button--primary:active, /deep/ .el-button--primary {
+    /deep/ .el-button--primary.is-active,
+    /deep/ .el-button--primary:active,
+    /deep/ .el-button--primary {
         background: none;
         border: 1px solid #005EA2;
         color: #6DC1FF;
@@ -231,15 +206,23 @@
         color: #6DC1FF;
     }
 
-    .el-table--border::after, .el-table--group::after, .el-table::before {
+    .el-table--border::after,
+    .el-table--group::after,
+    .el-table::before {
         display: none;
     }
 
-    .el-pagination.is-background .btn-next.disabled, /deep/ .el-pagination.is-background .btn-next:disabled, /deep/ .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .el-pager li.disabled {
+    .el-pagination.is-background .btn-next.disabled,
+    /deep/ .el-pagination.is-background .btn-next:disabled,
+    /deep/ .el-pagination.is-background .btn-prev.disabled,
+    .el-pagination.is-background .btn-prev:disabled,
+    /deep/ .el-pagination.is-background .el-pager li.disabled {
         color: #6DC1FF;
     }
 
-    /deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+    /deep/ .el-pagination.is-background .btn-next,
+    /deep/ .el-pagination.is-background .btn-prev,
+    .el-pagination.is-background .el-pager li {
         background-color: #061B44;
     }
 
@@ -256,11 +239,11 @@
         color: #6DC1FF;
     }
 
-    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
         background: rgba(27, 86, 200, 0.77);
     }
 
-    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped:hover > td {
+    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped:hover>td {
         background: rgba(27, 86, 200, 0.77);
     }
 
@@ -330,4 +313,25 @@
         background: #002540;
     }
 
-</style>
+    /* 滚动条 */
+    ..el-table__body-wrapper::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 10px;
+        /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+
+    ..el-table__body-wrapper::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        background: #535353;
+    }
+
+    ..el-table__body-wrapper::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        background: #EDEDED;
+    }
+</style>

src/views/Main.vue

@@ -46,7 +46,6 @@
                 </div>
             </transition>
         </div>
-
         <el-dialog title="扫描设备启动状态" :visible.sync="dialogScanVisible" width="30%">
             <el-table :data="scanGridData">
                 <el-table-column property="Name" label="设备" align="center"></el-table-column>