编写用户管理显示逻辑

README.md

@@ -73,6 +73,7 @@
    "user":{
       "username": "user2",
       "password": "123456",
+      "auth": "1",
       "other": "更多需要提供的数据请写在接口文档里"
    }
 }

src/components/ZooAside.vue

@@ -9,6 +9,8 @@ export default {
   },
   methods: {
     toPath(path) {
+      //跳转信息页
+      console.log('用户通过侧边栏跳转至'+path);
       this.$router.push(path)
     }
   },

src/components/ZooHeader.vue

@@ -20,9 +20,9 @@ export default {
   methods: {
     // 退出登录
     logout() {
-      console.log("logout");
-      sessionStorage.removeItem('isLogin')
-      this.$router.push('/login');
+      console.log("点击了退出登录");
+      sessionStorage.removeItem('isLogin')//移除登录状态
+      this.$router.push('/login');//跳转回登录界面
     }
   }
 }

src/components/ZooMain.vue

@@ -11,5 +11,8 @@ export default {
 </template>
 
 <style scoped>
+.main {
+  background-color: ghostwhite;
+}
 
 </style>

src/pages/ZooLogin.vue

@@ -38,8 +38,8 @@ export default {
 
   },
   mounted() {
-    this.updateUserName('');//清空登录用户名
-    this.user.username = localStorage.getItem('userName');//自动填充上次登录的用户
+    this.updateUserName('');//清空退出登录的用户名
+    this.user.username = localStorage.getItem('userName');//自动填充历史登录的用户
   }
 
 }

src/pages/ZooPanel.vue

@@ -8,9 +8,6 @@ import {SwitchButton} from "@element-plus/icons-vue";
 export default {
   name: "ZooPanel",
   computed: {
-    SwitchButton() {
-      return SwitchButton
-    }
   },
   data() {
     return {
@@ -18,9 +15,7 @@ export default {
     }
   },
   methods: {
-    // touser() {
-    //   $router.push('/panel/user')
-    // }
+
   },
   components: {
     ZooHeader,
@@ -65,7 +60,7 @@ export default {
 
 }
 .aside, .header, .main, .footer {
-  border: black solid 1px;
+  border: gray solid 1px;
 }
 .header, .main, .footer {
   width: 1098px;

src/pages/ZooUser.vue

@@ -1,18 +1,57 @@
 <script>
+import {Delete, Edit} from "@element-plus/icons-vue";
+
+
 export default {
   name: "ZooUser",
+  computed: {
+    Delete() {
+      return Delete
+    },
+    Edit() {
+      return Edit
+    },
+    usersFilter() {
+      let newusers = JSON.stringify(this.users)
+      newusers = JSON.parse(newusers)//深拷贝数组
+      // 计算格式化后的数组
+      newusers.forEach(e => {
+        if (e.auth === 0) {
+          e.auth = '管理员'
+        }
+        else if (e.auth === 1) {
+          e.auth = '饲养员'
+        }
+        else if (e.auth === 2) {
+          e.auth = '兽医'
+        }
+      })
+      return newusers
+    }
+  },
   data() {
     return {
-      users:[
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-        {username:'user10',password:'password'},
-      ]
+      users: []
+    }
+  },
+  methods: {
+    editUser(user) {
+      console.log('编辑用户', user)
+    },
+    deleteUser(user) {
+      console.log('删除用户', user)
+    },
+  },
+  mounted() {
+    //数据生成器
+    for (let i = 0; i < 100; i++) {
+      let user = {
+        userKey: i,
+        username: 'user' + (i + 3),
+        password: '123456',
+        auth: Math.floor(Math.random() * 3),
+      }
+      this.users.push(user)
     }
   }
 }
@@ -20,10 +59,45 @@ export default {
 
 <template>
   <div id="root">
-    
+    <div class="table">
+      <el-table :data="usersFilter" style="width: 80%">
+        <el-table-column fixed prop="username" label="用户名" width="150"/>
+        <el-table-column prop="password" label="密码" width="120"/>
+        <el-table-column prop="auth" label="身份" width="120"/>
+        <el-table-column prop="" label="占位置" width="700"/>
+        <el-table-column fixed="right" label="Operations" width="130">
+          <template #default="scope">
+            <el-button link type="primary" size="small" :icon="Edit" @click="editUser(scope.row)">
+              编辑
+            </el-button>
+            <el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.table {
+  /*width: 800px;*/
+}
 
+.el-table .warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+
+.el-table .info-row {
+  --el-table-tr-bg-color: var(--el-color-info-light-9);
+}
+
+.el-table .danger-row {
+  --el-table-tr-bg-color: var(--el-color-danger-light-9);
+}
 </style>