diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
index d40f6180c..c375ead5f 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/DataTable/compenents/el-data-table/el-data-table.vue
@@ -486,12 +486,8 @@ export default {
      */
     onEdit: {
       type: Function,
-      default(data) {
-        return this.$axios.put(
-          `${this.url}/${this.row[this.id]}`,
-          data,
-          this.axiosConfig
-        )
+      default(row) {
+        console.log('On delete row')
       }
     },
     /**
@@ -1094,7 +1090,7 @@ export default {
     },
     onDefaultEdit(row) {
       this.row = row
-      this.$refs.dialog.show(dialogModes.edit, row)
+      this.onEdit(row)
     },
     async onConfirm(isNew, formValue, done) {
       const data = {
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index f340ba139..ec0931dac 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -17,6 +17,7 @@ export default {
     }
   },
   data() {
+    const userTableActions = this.config.tableActions || {}
     return {
       defaultConfig: {
         axiosConfig: {
@@ -30,8 +31,8 @@ export default {
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数
         persistSelection: true, // 切换页面 已勾选项不会丢失
-        hasEdit: true, // 有编辑按钮
-        hasDelete: true,
+        hasEdit: userTableActions.hasEdit !== false, // 有编辑按钮
+        hasDelete: userTableActions.hasDelete !== false,
         hasNew: false,
         // editText: this.$t('action.update'), // 编辑按钮文案
         operationAttrs: {
@@ -43,6 +44,18 @@ export default {
           border: true, // 表格边框
           fit: true // 宽度自适应
         },
+        extraButtons: userTableActions.extraButtons,
+        onEdit: (row) => {
+          const defaultOnEdit = (row) => {
+            const routeName = userTableActions.editRoute
+            this.$router.push({ name: routeName, params: { id: row.id }})
+          }
+          let onEdit = userTableActions.onEdit
+          if (!onEdit) {
+            onEdit = defaultOnEdit
+          }
+          return onEdit(row)
+        },
         pageCount: 5,
         paginationLayout: 'total, sizes, prev, pager, next',
         transformQuery: query => {
diff --git a/src/components/ListTable/TableAction.vue b/src/components/ListTable/TableAction.vue
index 05249bcd4..50bcf94a4 100644
--- a/src/components/ListTable/TableAction.vue
+++ b/src/components/ListTable/TableAction.vue
@@ -31,7 +31,7 @@ export default {
     hasUpdate: defaultTrue,
     hasLeftActions: defaultTrue,
     hasSearch: defaultTrue,
-    hasRightActions: defaultTrue,
+    hasRightActions: defaultTrue
   },
   data() {
     return {
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index a14857a8e..e2fe05a89 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TableAction v-bind="actionConfig" @clickAction="handleActionClick"></TableAction>
+    <TableAction v-bind="headerActions" @clickAction="handleActionClick"></TableAction>
     <el-card class="table-content">
       <DataTable :config="tableConfig" @selection-change="handleSelectionChange"></DataTable>
     </el-card>
@@ -24,14 +24,14 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-    actionConfig: {
+    headerActions: {
       type: Object,
       default: () => ({ })
     }
   },
   data() {
     return {
-      selectRows: []
+      selectRows: [],
     }
   },
   computed: {
@@ -43,7 +43,27 @@ export default {
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
     handleActionClick(item) {
-      console.log('Handle ', item, this.selectRows)
+      const handler = this.getActionHandler(item)
+      handler(this.selectRows)
+    },
+    handleActionCreate() {
+      const routeName = this.headerActions.createRoute || ''
+      this.$router.push({ name: routeName })
+      console.log('handle create')
+    },
+    getActionHandler(item) {
+      let handler = this.headerActions.item
+      const defaultHandlerName = 'handle' + item[0].toUpperCase() + item.slice(1, item.length)
+      if (!handler) {
+        handler = this[defaultHandlerName]
+      }
+      if (!handler) {
+        handler = () => {
+          console.log('No handler found for ', item)
+        }
+      }
+      console.log(handler)
+      return handler
     }
   }
 }
diff --git a/src/layout/components/GenericListPage/index.vue b/src/layout/components/GenericListPage/index.vue
new file mode 100644
index 000000000..b6c5e08d4
--- /dev/null
+++ b/src/layout/components/GenericListPage/index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'index'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 418a4c5d1..4b9e8623a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,15 +69,15 @@ export const constantRoutes = [
         path: 'users/create',
         component: () => import('@/views/users/UserCreate.vue'), // Parent router-view
         name: 'UserCreate',
+        hidden: true,
         meta: { title: 'UserCreate' },
-        hidden: true
       },
       {
         path: 'users/:id',
         component: () => import('@/views/users/UserDetail.vue'), // Parent router-view
         name: 'UserDetail',
+        hidden: true,
         meta: { title: 'UserDetail', activeMenu: '/users/users' },
-        hidden: true
       },
       {
         path: 'groups',
@@ -89,16 +89,23 @@ export const constantRoutes = [
         path: 'groups/:id/update',
         component: () => import('@/views/users/UserGroupEdit.vue'), // Parent router-view
         name: 'UserGroupEdit',
+        hidden: true,
         meta: { title: 'UserGroupEdit' },
-        hidden: true
       },
       {
         path: 'groups/:id',
         component: () => import('@/views/users/UserGroupDetail/index.vue'), // Parent router-view
         name: 'UserGroupDetail',
+        hidden: true,
         meta: { title: 'UserGroupDetail', activeMenu: '/users/groups' },
-        hidden: true
-      }
+      },
+      {
+        path: 'groups/create',
+        component: () => import('@/views/users/UserCreate.vue'), // Parent router-view
+        name: 'UserGroupCreate',
+        hidden: true,
+        meta: { title: 'UserGroupCreate' }
+      },
     ]
   },
   {
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index f24d733c9..8274200db 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,7 +1,7 @@
 <template>
   <Page>
     <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-    <ListTable :table-config="tableConfig" :action-config="actionConfig" />
+    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
   </Page>
 </template>
 
@@ -41,12 +41,13 @@ export default {
           }
         ],
         // 写路由名字，table组件会自动传作为参数
-        action: {
-          hasEdit: 'UserGroupEdit',
-          newClick: 'UserGroupEdit'
+        tableActions: {
+          hasEdit: true,
+          editRoute: '404'
         }
       },
-      actionConfig: {
+      headerActions: {
+        createRoute: 'UserGroupCreate'
       }
 
     }