优化工序管理列表的滚动条

Signed-off-by: AiNoeLiYa <jzbcxy@gmail.com>

src/views/processManagement/basicProcessManagement/componets/processTable.vue

 <template>
   <div>
+    <div style="height:600px;">
+      <el-scrollbar style="height: 600px;">
         <el-table
           v-loading="loading"
           class="processList"
           border
           :data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
-      height="495"
           style="width: 100%"
           @selection-change="handleSelectionChange"
         >
@@ -50,6 +51,10 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-scrollbar />
+      </el-scrollbar>
+      <div />
+    </div>
   </div>
 </template>
 
@@ -71,6 +76,11 @@ export default {
       required: true,
       type: Number,
       default: null
+    },
+    loading: {
+      required: true,
+      type: Boolean,
+      default: null
     }
   },
   data() {
@@ -103,20 +113,11 @@ export default {
   }
 }
 
-// TODO: 滚动条样式  此为设置背景颜色
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
-  width: 0;
-  background-color: white;
+.el-scrollbar__wrap{
+  overflow-x: hidden;
 }
-
-// 设置宽度
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
-  width: 3px;
-  opacity: 0.5;
-}
-// 此为设置滚动条内部颜色
-::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  border-radius: 15px;
-  background-color: #b3b3b3;
+.el-scrollbar__bar.is-horizontal {
+  display: none;
 }
+
 </style>

src/views/processManagement/basicProcessManagement/index.vue

@@ -42,7 +42,6 @@
       <!-- TODO: 以下为基础工序管理列表 -->
       <div class="mb12 font-small-bold">基础工序列表</div>
 
-      <div class="ProcessTable">
       <transition name="fade-transform" mode="out-in">
         <component
           :is="ProcessTable"
@@ -50,22 +49,19 @@
           :query-params="queryParams"
           :process-list="processList"
           :n-index="nIndex"
+          :loading.sync="loading"
           @handle-detail="handleDetail"
           @handle-update="handleUpdate"
           @handle-delete="handleDelete"
         />
       </transition>
-      </div>
-      <div class="Pagination">
       <pagination
         v-show="total>0"
-          :key="queryParams.pageNum"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
-      </div>
 
     </div>
 
@@ -445,11 +441,11 @@ export default {
   width: 4px;
 }
 
-.ProcessTable{
-  padding: 5px;
-  margin: 0 auto;
-  height: 495px;
-}
+//.ProcessTable{
+//  padding: 5px;
+//  margin: 0 auto;
+//  height: 495px;
+//}
 
 //TODO: readOnly里去删除el-input的边框样式
 .aboutSingleDetails {