Browse Source

修改table表格滚动条宽度

kevin_zhangl 3 years ago
parent
commit
be03223e43
2 changed files with 30 additions and 0 deletions
  1. 15 0
      backendEle/src/App.vue
  2. 15 0
      frontendEle/src/App.vue

+ 15 - 0
backendEle/src/App.vue

@@ -18,4 +18,19 @@ export default {
     padding: 0;
     background: #f4f6f8;
   }
+
+  .el-table__body-wrapper::-webkit-scrollbar {
+    width: 12px; /*滚动条宽度*/
+    height: 10px; /*滚动条高度*/
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-track {
+    border-radius: 10px; /*滚动条的背景区域的圆角*/
+    -webkit-box-shadow: inset 0 0 15px rgba(238,238,238, 0.3);
+    background-color: #eeeeee; /*滚动条的背景颜色*/
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 10px; /*滚动条的圆角*/
+    -webkit-box-shadow: inset 0 0 15px rgba(145, 143, 0143, 0.3);
+    background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
+  }
 </style>

+ 15 - 0
frontendEle/src/App.vue

@@ -18,4 +18,19 @@ export default {
     padding: 0;
     background: #f4f6f8;
   }
+
+  .el-table__body-wrapper::-webkit-scrollbar {
+    width: 12px; /*滚动条宽度*/
+    height: 10px; /*滚动条高度*/
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-track {
+    border-radius: 10px; /*滚动条的背景区域的圆角*/
+    -webkit-box-shadow: inset 0 0 15px rgba(238,238,238, 0.3);
+    background-color: #eeeeee; /*滚动条的背景颜色*/
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 10px; /*滚动条的圆角*/
+    -webkit-box-shadow: inset 0 0 15px rgba(145, 143, 0143, 0.3);
+    background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
+  }
 </style>