完成用户列表

src/components/socre.vue

@@ -1,5 +1,6 @@
 <template>
 <!--  <div id="myChart"></div>-->
+  <h1 class="title">排名</h1>
   <el-row class="row-bg" justify="center">
     <el-col :span="16">
       <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
@@ -35,6 +36,11 @@ export default {
 </script>
 
 <style>
+.title{
+  display: flex;
+  justify-content: center;
+  color: #dddddd;
+}
 .el-table .warning-row {
   --el-table-tr-bg-color: var(--el-color-warning-light-9);
 }

src/components/userlist.vue

@@ -0,0 +1,48 @@
+<template>
+  <h1 class="title">
+    用户
+  </h1>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+      <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
+        <el-table-column prop="id" label="Id" width="180" />
+        <el-table-column prop="username" label="User" width="180" />
+        <el-table-column prop="affiliation" label="Affiliation" />
+        <el-table-column prop="country" label="Country" />
+        <el-table-column prop="website" label="Website" />
+
+      </el-table>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default {
+  data(){
+    return{
+      tableData:[],
+    }
+  },
+  mounted() {
+    axios.get('/api/v1/user/users').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.tableData = res.data.data;
+      }
+    })
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+.title{
+  display: flex;
+  justify-content: center;
+  color: #dddddd;
+}
+</style>