1.用户列表表格调整；2分页组件调整；3.批量按钮调整

src/components/pagination/index.vue

@@ -31,11 +31,9 @@ export default {
 
 <style lang="less" scoped>
 .el-pagination {
-  position: absolute;
-  width: 200px;
+  position: relative;
   top: 10px;
-  right: 400px;
-
+  float: right;
   /deep/.el-pager li:not(.disabled).active {
     background-color: #2ea8e6;
   }

src/views/userManagement/personManagement/index.vue

@@ -38,6 +38,9 @@ export default {
             query: ''
         };
     },
+    mounted(){
+        this.$refs.buttonFocus.$el.focus();
+    },
     methods: {
         activeShow() {
             this.show = true;
@@ -185,6 +188,7 @@ export default {
 
     .showTable {
         padding: 10px 16px 0 20px;
+        height: calc(100% - 60px);
         //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
     }
 }

src/views/userManagement/personManagement/tables/activeUser.vue

@@ -1,7 +1,12 @@
 <template>
     <div>
+        <div class="batch_button">
+            <el-button class="export" @click="exportData">导出数据</el-button>
+            <el-button class="activate" @click="batchActivate">批量激活</el-button>
+            <el-button class="delete" @click="batchDelete">批量删除</el-button>
+        </div>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
-            :cell-style="{ textAlign: 'center' }" style="width: 98%" @selection-change="handleSelectionChange">
+            :cell-style="{ textAlign: 'center' }" height="470" style="width: 100%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50">
             </el-table-column>
             <el-table-column prop="username" label="用户名">
@@ -33,13 +38,6 @@
             </el-table-column>
         </el-table>
         <div class="bottom">
-            <div class="bottom_button">
-                <el-button class="delete" type="text">批量删除</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="disabled" type="text">批量激活</el-button>
-                <el-divider direction="vertical"></el-divider>
-                <el-button class="export" type="text">导出数据</el-button>
-            </div>
             <page class="page" :paginationData="paginationData"></page>
         </div>
         <!--弹窗-->
@@ -96,6 +94,7 @@ export default {
                 page
             ).then((res) => {
                 if (res.data.code === 0 && res.data.data.length > 0) {
+                    this.paginationData.total = res.data.total;
                     this.tableData = res.data.data.map((e) => {
                         return {
                             username: e.name,
@@ -112,7 +111,6 @@ export default {
             })
         },
         handleSizeChange(val) {
-            console.log(`每页 ${val} 条`);
             this.currentPageSize = val;
             this.getTableData(this.currentPage);
         },
@@ -140,12 +138,21 @@ export default {
         },
         userInfoEdit(data) {
             let options = {
-                id:data.id,
-                
+                id: data.id,
+
             };
             updateUserDetail(options).then((res) => {
 
             })
+        },
+        batchActivate() {
+
+        },
+        batchDelete() {
+
+        },
+        exportData() {
+
         }
     }
 }
@@ -159,13 +166,10 @@ export default {
 }
 
 .el-table {
-    position: absolute;
-    top: 60px;
+    position: relative;
+    top: 50px;
     left: 0;
-    margin-left: 1%;
-    height: 400px;
     border: 1px solid #f0f2f2;
-    margin-top: 10px;
     font-size: 0.95rem;
     font-family: PingFang SC;
     font-weight: 500;
@@ -216,38 +220,58 @@ export default {
     }
 }
 
-.bottom {
-    position: absolute;
-    bottom: 10px;
-    left: 50px;
-    height: 50px;
-    width: 95%;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
+.batch_button {
+    position: relative;
+    top: 50px;
+    float: left;
+    left: 280px;
 
-    .bottom_button {
+    .export {
+        padding: 3px;
+        width: 80px;
+        height: 30px;
+        bottom: 15px;
         position: absolute;
-        left: 20px;
-        margin-top: 15px;
-
-        .delete {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+        color: #fff;
+        border-radius: 4px;
+        right: 190px;
+        background-color: #2ea8e6;
+    }
 
-        .disabled {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+    .activate {
+        padding: 3px;
+        width: 80px;
+        height: 30px;
+        bottom: 15px;
+        position: absolute;
+        color: #fff;
+        border-radius: 4px;
+        right: 100px;
+        background-color: #2ea8e6;
+    }
 
-        .export {
-            font-size: 14px;
-            text-align: center;
-            padding: 1px;
-        }
+    .delete {
+        padding: 3px;
+        width: 80px;
+        height: 30px;
+        bottom: 15px;
+        position: absolute;
+        color: #fff;
+        border-radius: 4px;
+        right: 10px;
+        background-color: #b3b3b3;
     }
+
+}
+
+.bottom {
+    position: absolute;
+    left: 20px;
+    right: 16px;
+    bottom: 20px;
+    height: 50px;
+    line-height: 20px;
+    background-color: #ffffff;
+    text-align: center;
 }
 </style>