diff --git a/cms-admin-frontend/src/views/rolemanage.vue b/cms-admin-frontend/src/views/rolemanage.vue
deleted file mode 100644
index 17aa2d0c6741ad2636c17079c6f2d604a7ca8a15..0000000000000000000000000000000000000000
--- a/cms-admin-frontend/src/views/rolemanage.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <!-- 角色管理 -->
-
-    <el-table
-      :data="tableData"
-      border
-      style="width: 100%"
-      :header-cell-style="{ textAlign: 'center' }"
-      :cell-style="{ textAlign: 'center' }"
-    >
-      <el-table-column fixed prop="date" label="id" width="150">
-      </el-table-column>
-      <el-table-column prop="city" label="角色名称" width="200">
-      </el-table-column>
-      <el-table-column prop="jurisdiction" label="权限" width="250">
-      </el-table-column>
-      <el-table-column prop="time" label="注册时间" width="200">
-      </el-table-column>
-      <el-table-column prop="enable" label="是否启用" width="230">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.states"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-value="true"
-            inactive-value="false"
-            @changes="changeSwitchs(Sevent, scope.row, scope.$indexs)"
-          >
-          </el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" prop="operation" label="操作" width="130">
-        <template>
-          <el-button type="text" size="small">编辑</el-button>
-          <el-button type="text" size="small">删除</el-button>
-          <el-button type="text" size="small">添加</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      tableData: [
-        {
-          date: '1',
-          city: '打虎英雄',
-          jurisdiction: '所有权限',
-          time: '2020-9-4'
-        },
-        {
-          date: '2',
-          city: '宫本武藏',
-          jurisdiction: '所有权限',
-          time: '一刀流'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    changeSwitchs (indexs, row) {
-      console.log(indexs, row)
-    }
-  }
-}
-</script>
-
-<style>
-</style>
diff --git a/cms-admin-frontend/src/views/users/index.vue b/cms-admin-frontend/src/views/users/index.vue
index e2640984b1eb75c60e16d5cb1fabb16386056baa..86c21a4bc3a7992d820075cf9a933a4bf81a3e1a 100644
--- a/cms-admin-frontend/src/views/users/index.vue
+++ b/cms-admin-frontend/src/views/users/index.vue
@@ -13,7 +13,12 @@
           <el-button type="primary" icon="el-icon-search" @click="search"
             >搜索</el-button
           >
-          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">添加</el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-circle-plus-outline"
+            @click="handleAdd"
+            >添加</el-button
+          >
         </el-form-item>
       </el-form>
     </el-card>
@@ -43,7 +48,7 @@
       <el-table-column prop="address" label="密码" width="100">
       </el-table-column>
       <el-table-column prop="isdelete" label="是否删除" width="130">
-        <template slot-scope="scope">
+        <!-- <template slot-scope="scope">
           <el-switch
             v-model="scope.row.state"
             active-color="#13ce66"
@@ -53,10 +58,10 @@
             @change="changeSwitch(Sevent, scope.row, scope.$index)"
           >
           </el-switch>
-        </template>
+        </template> -->
 
-        <!-- <el-button type="text" size="small">是</el-button>
-        <el-button type="text" size="small">否</el-button> -->
+        <el-button type="text" size="small">是</el-button>
+        <el-button type="text" size="small">否</el-button>
       </el-table-column>
       <el-table-column prop="enable" label="是否启用" width="130">
         <template slot-scope="scope">
@@ -66,7 +71,7 @@
             inactive-color="#ff4949"
             active-value="true"
             inactive-value="false"
-            @changes="changeSwitchs(Sevent,scope.row,scope.$indexs)"
+            @changes="changeSwitchs(Sevent, scope.row, scope.$indexs)"
           >
           </el-switch>
         </template>
@@ -79,25 +84,39 @@
       </el-table-column>
       <el-table-column fixed="right" prop="operation" label="操作" width="140">
         <template slot-scope="scope">
-          <el-button @click="handleClick(scope.row)" type="text" size="small"
+          <el-button
+            @click="handleClick(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            icon="el-icon-edit"
             >编辑</el-button
           >
-          <el-button type="text" size="small">删除</el-button>
+          <el-button
+            type="text"
+            size="small"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.$index, scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 静态模态框，适用于增加和编辑 -->
 
-    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
+    <el-dialog
+      title="用户信息"
+      :visible.sync="dialogFormVisible"
+      style="overflow: hidden"
+    >
+      <el-form :model="formData" :label-position="labelPosition">
         <el-form-item label="用户名" :label-width="formLabelWidth">
-          <el-input v-model="formData.username" autocomplete="off"></el-input>
+          <el-input v-model="formData.username"></el-input>
         </el-form-item>
         <el-form-item label="昵称" :label-width="formLabelWidth">
-          <el-input v-model="formData.nickname" autocomplete="off"></el-input>
+          <el-input v-model="formData.nickname"></el-input>
         </el-form-item>
-        <el-form-item label="角色名称">
+        <el-form-item label="角色名称" :label-width="formLabelWidth">
           <el-select v-model="formData.city" placeholder="请选择">
             <el-option
               v-for="item in options"
@@ -137,42 +156,76 @@
         <el-button type="primary" @click="handleSave">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 分页组件 -->
+
+    <div class="block">
+      <el-pagination
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageIndexChange"
+        :current-page="pager.pageIndex"
+        :page-size="pager.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pager.rowsTotal"
+        background
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  methods: {
-    handleClick (row) {
-      console.log(row)
-    },
-    // 添加
-    handleAdd () {
-      this.dialogFormVisible = true
-    },
-    // 搜索
-    search () {},
-    // 模态框取消
-    cancel () {
-      this.dialogFormVisible = false
+  methods:
+    // 编辑
+    {
+      handleClick (index, row) {
+        this.dialogFormVisible = true
+        this.formData.id = 0
+        this.currentIndex = index
+        console.log(index, row)
+      },
+      // 删除
+      handleDelete () {},
+      // 添加
+      handleAdd () {
+        this.dialogFormVisible = true
+      },
+      // 搜索
+      search () {},
+      // 模态框取消
+      cancel () {
+        this.dialogFormVisible = false
+      },
+      // 模态框确定
+      handleSave () {}
     },
-    // 模态框确定
-    handleSave () {}
-  },
   // switch开关
-  changeSwitch (index, row) {
-    console.log(index, row)
+  // changeSwitch (index, row) {
+  //   console.log(index, row)
+  // },
+
+  // 当页面大小发生改变的时候，重新拉取数据
+  handlePageSizeChange () {
+
   },
-  changeSwitchs (indexs, row) {
-    console.log(indexs, row)
+  // 当页面代码发生改变的时候，重新拉取数据
+  handlePageIndexChange () {
+
   },
 
   data () {
     return {
-      formLabelWidth: 120,
+      formLabelWidth: '120px',
       currentIndex: 0,
       dialogFormVisible: false,
       keyword: '',
+      labelPosition: 'left',
+      pager: {
+        pageIndex: 1,
+        pageSize: 10,
+        rowsTotal: 30
+      },
 
       //   复选框  角色属性
       options: [
@@ -241,4 +294,11 @@ export default {
 }
 </script>
 <style>
+
+.block{
+  text-align: center;
+  /* display: flex; */
+  margin-top: 10px;
+}
+
 </style>