diff --git a/src/layout/components/ListTables/table.vue b/src/layout/components/ListTables/table.vue
new file mode 100644
index 000000000..da1199b35
--- /dev/null
+++ b/src/layout/components/ListTables/table.vue
@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <el-table
+      v-loading="loading"
+      :data="tabledata"
+    >
+      <el-table-column
+        v-if="hasSelect"
+        type="selection"
+        align="center"
+        header-align="center"
+      />
+      <el-table-column
+        v-for="col of columns"
+        :key="col.props"
+        :label="col.label"
+      >
+        <template slot-scope="scope">
+          <el-button v-if="col.nextroute" type="text" size="small" style="font-size:14px" @click="$router.push({name: col.nextroute, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-button>
+          <span v-else>{{ scope.row[col.key] }}</span>
+        </template>
+      </el-table-column>
+      <slot name="action" />
+    </el-table>
+    <el-pagination
+      style="text-align:center;margin-top:20px;"
+      :current-page="current_page"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="page_size"
+      :total="total"
+      layout="total, sizes, prev, pager, next, jumper"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+// import ElDataTableColumn from '@/components/el-data-table/components/el-data-table-column'
+export default {
+  components: {
+    // ElDataTableColumn
+  },
+  props: {
+    getData: {
+      type: Function,
+      default: () => []
+    },
+    hasSelect: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      tabledata: [],
+      loading: false,
+      page_size: 10,
+      current_page: 1,
+      total: 0
+    }
+  },
+  created() {
+    this.get(this.current_page, this.page_size, this.offset)
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.offset = (this.current_page - 1) * val
+      this.page_size = val
+      this.get(this.current_page, val, this.offset)
+    },
+    handleCurrentChange(val) {
+      this.offset = (val - 1) * this.page_size
+      this.current_page = val
+      this.get(val, this.page_size, this.offset)
+    },
+    get(draw, limit, offset) {
+      this.loading = true
+      this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
+        console.log(response)
+        this.tabledata = response.results
+        this.total = response.count
+        this.loading = false
+      })
+    }
+
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index 748a8db5f..a7908c0a9 100644
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@@ -3,6 +3,7 @@ export { default as NavHeader } from './NavHeader'
 export { default as AppMain } from './AppMain'
 export { default as Page } from './Page'
 export { default as ListTables } from './ListTables'
+export { default as Tables } from './ListTables/table.vue'
 export { default as TagsView } from './TagsView'
 export { default as Footer } from './Footer'
 export { default as IBox } from './IBox'
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index bfc9a10af..86280b433 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -2,131 +2,50 @@
   <Page>
     <template slot="content">
       <IBox :title="$t('users.usergrouplist')">
-        <ListTables
-          :tablebutton="$t('users.createusergroup')"
-          tableroute="UserGroupEdit"
-          @SizeChange="handleSizeChange"
-          @CurrentChange="handleCurrentChange"
-        >
-          <el-table
-            v-loading="listLoading"
-            :data="tableData"
-            stripe
-            border
-            class="userTable"
-          >
-            <el-table-column
-              type="selection"
-              width="55"
-              align="center"
-              header-align="center"
-            />
-            <el-table-column
-              :label="this.$t('usergroup.name')"
-              sortable
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.user')"
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <span>{{ scope.row.users_amount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.comment')"
-              align="center"
-              sortable
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <span>{{ scope.row.comment }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="this.$t('usergroup.action')"
-              align="center"
-              header-align="center"
-            >
-              <template slot-scope="scope">
-                <el-button
-                  size="mini"
-                  type="primary"
-                  @click="handleEdit(scope.$index, scope.row)"
-                >{{ $t('usergroup.update') }}</el-button>
-                <el-button
-                  size="mini"
-                  type="danger"
-                  @click="handleDelete(scope.$index, scope.row)"
-                >{{ $t('usergroup.delete') }}</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </ListTables>
+        <tables v-bind="tableConfig" />
       </IBox>
     </template>
   </Page>
 </template>
 
 <script>
-import { ListTables, IBox, Page } from '@/layout/components'
+import { IBox, Page, Tables } from '@/layout/components'
 import { getUserGroupList } from '@/api/user'
-import Tables from '@/layout/mixin/ListTables'
 export default {
   components: {
-    ListTables,
     IBox,
-    Page
+    Page,
+    Tables
   },
-  mixins: [Tables],
   data() {
     return {
-      tableData: [],
-      listLoading: true
-    }
-  },
-  created() {
-    this.getUsers(this.current_page, this.page_size, this.offset)
-  },
-  methods: {
-    handleDetail: function(index, row) {
-      this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
-    },
-    handleEdit: function(index, row) {
-      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
-    },
-    handleDelete: function(index, row) {
-      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
-    },
-    handleSizeChange(val) {
-      this.offset = (this.current_page - 1) * val
-      this.page_size = val
-      this.getUsers(this.current_page, val, this.offset)
-    },
-    handleCurrentChange(val) {
-      this.offset = (val - 1) * this.page_size
-      this.current_page = val
-      this.getUsers(val, this.page_size, this.offset)
-    },
-    getUsers(draw, limit, offset) {
-      this.listLoading = true
-      getUserGroupList({ draw, limit, offset }).then(response => {
-        this.tableData = response.results
-        this.total = response.count
-        this.listLoading = false
-      })
+      tableConfig: {
+        getData: getUserGroupList,
+        hasSelect: true,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('usergroup.name'),
+            key: 'name',
+            nextroute: 'UserDetail'
+          },
+          {
+            prop: 'user',
+            label: this.$t('usergroup.user'),
+            key: 'users_amount'
+          },
+          {
+            prop: 'comment',
+            label: this.$t('usergroup.comment'),
+            key: 'comment'
+          }
+        ]
+      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
+<style>
 
 </style>
diff --git a/src/views/users/UserGroupList_Backup.vue b/src/views/users/UserGroupList_Backup.vue
new file mode 100644
index 000000000..49b08a9cb
--- /dev/null
+++ b/src/views/users/UserGroupList_Backup.vue
@@ -0,0 +1,132 @@
+<template>
+  <Page>
+    <template slot="content">
+      <IBox :title="$t('users.usergrouplist')">
+        <ListTables
+          :tablebutton="$t('users.createusergroup')"
+          tableroute="UserGroupEdit"
+          @SizeChange="handleSizeChange"
+          @CurrentChange="handleCurrentChange"
+        >
+          <el-table
+            v-loading="listLoading"
+            :data="tableData"
+            stripe
+            border
+            class="userTable"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              align="center"
+              header-align="center"
+            />
+            <el-table-column
+              :label="this.$t('usergroup.name')"
+              sortable
+              align="center"
+              header-align="center"
+            >
+              <template slot-scope="scope">
+                <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="this.$t('usergroup.user')"
+              align="center"
+              header-align="center"
+            >
+              <template slot-scope="scope">
+                <span>{{ scope.row.users_amount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="this.$t('usergroup.comment')"
+              align="center"
+              sortable
+              header-align="center"
+            >
+              <template slot-scope="scope">
+                <span>{{ scope.row.comment }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              :label="this.$t('usergroup.action')"
+              align="center"
+              header-align="center"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="handleEdit(scope.$index, scope.row)"
+                >{{ $t('usergroup.update') }}</el-button>
+                <el-button
+                  size="mini"
+                  type="danger"
+                  @click="handleDelete(scope.$index, scope.row)"
+                >{{ $t('usergroup.delete') }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </ListTables>
+      </IBox>
+    </template>
+  </Page>
+</template>
+
+<script>
+import { ListTables, IBox, Page } from '@/layout/components'
+import { getUserGroupList } from '@/api/user'
+import Tables from '@/layout/mixin/ListTables'
+export default {
+  components: {
+    ListTables,
+    IBox,
+    Page
+  },
+  mixins: [Tables],
+  data() {
+    return {
+      tableData: [],
+      listLoading: true
+    }
+  },
+  created() {
+    this.getUsers(this.current_page, this.page_size, this.offset)
+  },
+  methods: {
+    handleDetail: function(index, row) {
+      this.$router.push({ name: 'UserGroupDetail', params: { id: row.id }})
+    },
+    handleEdit: function(index, row) {
+      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
+    },
+    handleDelete: function(index, row) {
+      this.$router.push({ name: 'UserGroupEdit', params: { id: row.id }})
+    },
+    handleSizeChange(val) {
+      this.offset = (this.current_page - 1) * val
+      this.page_size = val
+      this.getUsers(this.current_page, val, this.offset)
+    },
+    handleCurrentChange(val) {
+      this.offset = (val - 1) * this.page_size
+      this.current_page = val
+      this.getUsers(val, this.page_size, this.offset)
+    },
+    getUsers(draw, limit, offset) {
+      this.listLoading = true
+      getUserGroupList({ draw, limit, offset, row: 1 }).then(response => {
+        this.tableData = response.results
+        this.total = response.count
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>