开始研究el-table。

企业级管理系统/web/admin_system/src/layout/Index.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:05:44
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-09 15:50:52
+ * @LastEditTime: 2023-01-18 17:40:55
  * @FilePath: \admin_system\src\layout\Index.vue
  * @Description: 
  * 
@@ -66,7 +66,7 @@ export default {
 }
 
 #layout-main {
-    background-color: #ddd;
+    background-color: #eee;
     /* height: 0; */
     /* flex-grow: 1; */
 }

企业级管理系统/web/admin_system/src/layout/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-04 11:39:04
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-11 17:07:13
+ * @LastEditTime: 2023-01-18 14:18:28
  * @FilePath: \admin_system\src\layout\components\Header.vue
  * @Description: 
  * 
@@ -42,7 +42,7 @@ export default {
     methods: {
         logout()
         {
-            this.$confirm("是否退出系统？", "提示", {
+            this.$confirm("是否退出系统？", "请确认", {
                 confirmButtonText: "是",
                 cancelButtonText: "否",
                 type: "warning",

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

@@ -1,8 +1,9 @@
+/* eslint-disable */
 <!--
  * @Author: Kane
  * @Date: 2023-01-12 14:43:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-18 11:45:26
+ * @LastEditTime: 2023-01-18 17:38:03
  * @FilePath: \admin_system\src\views\info\StaffInfo.vue
  * @Description: 
  * 
@@ -21,12 +22,23 @@
                 <el-col :span="12"></el-col>
             </el-row>
         </el-form>
-        <el-table ref="table" :data="table_data"> </el-table>
+        <el-table ref="table" :data="table_data" border width="100%" :stripe="true">
+            <el-table-column type="selection" min-width="30" align="center"></el-table-column>
+            <el-table-column prop="staff_name" min-width="200" label="员工名称" align="center"></el-table-column>
+            <el-table-column prop="staff_code" min-width="100" label="工号" align="center"></el-table-column>
+            <el-table-column prop="p13uid" min-width="200" label="P13账号" align="center"></el-table-column>
+            <el-table-column label="操作" min-width="200" align="center">
+                <template #default="scope">
+                    <el-button type="warning" size="mini" @click="onTableEdit(scope.row)">编辑</el-button>
+                    <el-button type="danger" size="mini">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
 </template>
 
 <script>
-/* eslint-disable */
+/* eslint-disable no-unused-vars*/
 export default {
     name: "staff-info",
     data()
@@ -37,9 +49,33 @@ export default {
             },
             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" },
             ],
         };
     },
+    methods: {
+        onTableEdit(row)
+        {
+
+        },
+        /**
+         * 根据表格行index返回样式，实现斑马纹
+         * @param row
+         * @param rowIndex
+         * @return 返回的样式名称
+         */
+        tabRowClassName(row, rowIndex)
+        {
+            let index = rowIndex + 1;
+            if (index % 2 == 0)
+            {
+                return 'warning-row';
+            }
+        },
+    },
 };
 </script>
 
@@ -63,6 +99,10 @@ export default {
     text-align: left;
 }
 
+.query_box>*+* {
+    margin-top: 15px;
+}
+
 .info_box {
     background-color: #fff;
     border-radius: 5px;
@@ -71,6 +111,10 @@ export default {
     width: 100%;
 }
 
+.el-table .warning-row {
+    background-color: #F3F9FF;
+}
+
 
 .query_box:hover,
 .info_box:hover {