src/components/DataTable.vue

@@ -134,6 +134,10 @@ export default {
     updatePageCount(newPageSize) {
       this.pageCount = Math.floor(this.dataCount / newPageSize);
       this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1;
+    },
+    //更新单页数据
+    updateRows(newPageIndex) {
+      
     },
     //更新分页按钮数据
     updatePageBtn(newPageIndex){
@@ -151,9 +155,7 @@ export default {
           this.pageBtn.push({text: '...', index: newPageIndex})
         }
         //渲染当前页码左右各两格页码
-        const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2;
+        for(let i = newPageIndex - 2; i <= newPageIndex + 2; i++){
-        const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1);
-        for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){
           this.pageBtn.push({text: `${i}`, index: i})
         }
         //当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面
@@ -172,7 +174,7 @@ export default {
         this.updatePageCount(newVal)
         //单页显示数据量改变时重置当前索引，防止数据以及控件异常
         this.currentPageIndex = 1
-        this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal})
+        this.updateRows(this.currentPageIndex)
         this.updatePageBtn(this.currentPageIndex)
       },
       immediate: true
@@ -180,7 +182,7 @@ export default {
     //监听页索引，用于切换数据
     'currentPageIndex': {
       handler(newVal) {
-        this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize})
+        this.updateRows(newVal)
         this.updatePageBtn(newVal)
       },
       immediate: true

src/request/api.js

@@ -17,15 +17,11 @@ const getUserInfo = async () => await request.get('/api/User/UserInfo')
 //获取用户列表（分页）
 const getUserList = async (pageIndex,pageSize,desc) => await request.get(`/api/Admin/UserList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
 
-//获取用户数量
-const getUserCount = async () => await request.get('/api/Admin/UserCount')
-
 export default {
     login,
     register,
     SendValidateCode,
     getAllConfig,
     getUserInfo,
-    getUserList,
+    getUserList
-    getUserCount
 }

src/router/index.js

@@ -61,24 +61,13 @@ const routes = [
         path: 'test',
         component: () => import('@/views/layout/Users.vue'),
         meta: {
-          title: '充值中心',
+          title: '用户管理',
           icon: 'inbox',
           showInMenu: true,
           showInUser:false,
           isHome:false
         }
       },
-      {
-        path: 'api',
-        component: () => import('@/views/layout/Dashboard.vue'),
-        meta: {
-          title: 'API管理',
-          icon: 'home',
-          showInMenu: true,
-          showInUser:false,
-          isHome:true
-        }
-      },
     ]
   }
 ]

src/views/layout/Users.vue

@@ -2,8 +2,8 @@
     <div class="main-wrapper">
 
         <div class="row">
-            <div class="col" v-if="isLoaded">
+            <div class="col">
-                <DataTable :title="'用户管理'" :headers="tableHeaders" :rows="tableData" :data-count="dataCount" @pageChanged="pageChangedHandle"/>
+                <DataTable :title="'员工信息表'" :headers="tableHeaders" :rows="tableData" :data-count="dataCount"/>
             </div>
         </div>
     </div>
@@ -16,41 +16,113 @@ export default {
   components: { DataTable },
   data() {
     return {
-        dataCount:0,
+        dataCount:11,
-        isLoaded:false,
       tableHeaders: [
-        { text: "编号", value: "id", width: "155px" },
+        { text: "名字", value: "name", width: "155px" },
-        { text: "用户名", value: "userName", width: "214px" },
+        { text: "位置", value: "position", width: "214px" },
-        { text: "邮箱", value: "email", width: "48px" },
+        { text: "办公室", value: "office", width: "48px" },
-        { text: "余额", value: "balance", width: "29px" },
+        { text: "年龄", value: "age", width: "29px" },
-        { text: "状态", value: "isBan", width: "82px",type:"state"},
+        { text: "开始日期", value: "startDate", width: "82px" },
-        { text: "角色", value: "roles", width: "103px" },
+        { text: "工资", value: "salary", width: "103px" },
-        { text: "创建时间", value: "created", width: "103px" },
+      ],
+      tableData: [
+        {
+          name: "佐藤爱理",
+          position: "会计",
+          office: "东京",
+          age: 33,
+          startDate: "2008/11/28",
+          salary: "162,700 元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        {
+          name: "安吉莉卡·拉莫斯",
+          position: "首席执行官 （CEO）",
+          office: "伦敦",
+          age: 47,
+          startDate: "2009/10/09",
+          salary: "1,200,000 美元",
+        },
+        // 其他数据...
       ],
-      tableData: [],
     };
   },
   methods: {
     async loadUserList(pageIndex = 1, pageSize = 10, desc = false){
         try{
             const res = await this.$api.getUserList(pageIndex,pageSize,desc)
-            if(res.code == '1000'){
+            console.log(res)
-              this.tableData = res.data
-            }
         }catch(e){
             this.$alert('用户列表数据加载失败!','danger')
             console.error(e)
         }
-    },
-    async pageChangedHandle(newval){
-      console.log(newval)
-      await this.loadUserList(newval.pageIndex,newval.pageSize,false)
     }
   },
-  async mounted(){
+  mounted(){
-    await this.loadUserList()
+    this.loadUserList()
-    this.dataCount = (await this.$api.getUserCount()).data
-    this.isLoaded = true
   }
 };
 </script>