保存进度！

企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue

@@ -3,7 +3,7 @@
  * @Author: Kane
  * @Date: 2023-01-12 14:43:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-18 23:24:41
+ * @LastEditTime: 2023-01-19 15:40:26
  * @FilePath: \admin_system\src\views\info\StaffInfo.vue
  * @Description: 
  * 
@@ -26,7 +26,7 @@
             <el-table-column type="selection" min-width="30" align="center"></el-table-column>
             <el-table-column min-width="200" label="员工名称" align="left" fixed="left">
                 <template #default="rowdata">
-                    <span @click="onShowStaffInfo(rowdata.row)" style="cursor:pointer;display:block;height:100%;">{{
+                    <span @click="onShowStaffInfo(rowdata.row)" style="cursor: pointer; display: block; height: 100%">{{
                         rowdata.row.staff_name
                     }}</span>
                 </template>
@@ -40,6 +40,17 @@
                 </template>
             </el-table-column>
         </el-table>
+        <el-row :gutter="10" width="100%">
+            <el-col :span="18"></el-col>
+            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
+                :page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
+                :total="table_data.length"></el-pagination>
+            <el-col :span="6" class="pull_right">
+                <el-button type="primary">重置</el-button>
+                <el-button type="danger">批量删除</el-button>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
@@ -53,20 +64,38 @@ export default {
             query_param: {
                 staff_code: "",
             },
+            table_current_page: 1,
             table_data: [
-                { staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
-                { staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
-                { staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
-                { staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
-                { staff_name: "王炜", staff_code: "588", p13uid: "wangwei-202" },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
+                {
+                    staff_name: "王炜",
+                    staff_code: "588",
+                    p13uid: "wangwei-202",
+                },
             ],
         };
     },
     methods: {
-        onTableEdit(row)
-        {
-
-        },
+        onTableEdit(row) { },
         /**
          * 根据表格行index返回样式，实现斑马纹
          * @param row
@@ -78,13 +107,25 @@ export default {
             let index = rowIndex + 1;
             if (index % 2 == 0)
             {
-                return 'warning-row';
+                return "warning-row";
             }
         },
+        /**
+         * 点击表格 用户名称 时的消息处理函数
+         * @param {*} staff
+         */
         onShowStaffInfo(staff)
         {
             console.log("点击名称", staff);
         },
+        /**
+         * 表格页显示数量变更时消息处理函数
+         */
+        onTablePageSizeChange() { },
+        /**
+         * 用户变更当前页时消息处理函数
+         */
+        onCurrentPageIndexChange() { },
     },
 };
 </script>
@@ -122,10 +163,9 @@ export default {
 }
 
 .el-table .warning-row {
-    background-color: #F3F9FF;
+    background-color: #f3f9ff;
 }
 
-
 .query_box:hover,
 .info_box:hover {
     box-shadow: 0px 0px 3px 3px #cccccc;
@@ -134,4 +174,18 @@ export default {
 div.cell {
     height: 100%;
 }
-</style>
+
+.pull_left {
+    margin-left: 15px;
+    margin-right: auto;
+}
+
+.pull_right {
+    display: flex;
+    justify-content: right;
+}
+
+.pull_right:last-child {
+    margin-right: 15px;
+}
+</style>