21.管理员列表页面布局和重写ElementPlus 默认样式

src/assets/admin/css/home.css

@@ -111,3 +111,15 @@ li {
     flex: 1;
     overflow-y: auto;
 }
+
+/* 重写 ElementPlus 默认样式 */
+/* 表格 */
+.el-table {
+    margin-top: 7px;
+    width: 1000px;
+}
+
+/* 面包屑 */
+.el-breadcrumb {
+    margin-bottom: 7px;
+}

src/views/admin/administrator/list.vue

@@ -1,18 +1,28 @@
 <template>
-  <div>
+  <el-table :data="data.list" border>
-    管理员列表
+    <el-table-column prop="id" label="ID" width="60" />
+    <el-table-column prop="name" label="名称" />
+    <el-table-column prop="email" label="邮箱" />
+    <el-table-column prop="remark" label="备注" />
 
-  </div>
+    <el-table-column label="操作" width="150">
+      <template #default="scope">
+        <el-button size="small" type="primary">编辑</el-button>
+        <el-button size="small">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 
-<script>
+<script setup>
-export default {
+import { reactive } from "vue";
-  setup() {
+    const data = reactive({
+      list:[
+        {id: '1', name: '李龙龙', email:'lilonglong@koteladt.com', remark:'lll'},
+        {id: '2', name: '张三', email:'zhangsan@koteladt.com', remark:'zs'},
+      ]
+    })
 
-
-    return {}
-  }
-}
 </script>
 
 <style lang="scss" scoped>