From 110f9ef9d33a4200c68d05aca7d90da5fc05f135 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 31 Mar 2020 15:49:45 +0800
Subject: [PATCH] =?UTF-8?q?[Update]=20=E4=BF=AE=E6=94=B9datatable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataTable/index.vue            | 102 ++++++++++
 src/components/ListTables/headeraction.vue    |  13 +-
 src/components/ListTables/index-backup.vue    | 166 ----------------
 src/components/ListTables/table.vue           |  15 +-
 src/components/Select2/index.vue              |   7 +-
 .../el-data-table/el-data-table.vue           | 179 ++++--------------
 .../components/BaseDetailPage/index.vue       |   4 +-
 src/layout/components/IBox.vue                |   4 +-
 .../components/NavHeader/AccountDropdown.vue  |   2 +-
 src/layout/components/Page/index.vue          |   3 +-
 src/layout/components/SubMenuPage/index.vue   |   2 +-
 src/main.js                                   |  15 --
 src/views/users/UserGroupDetail/index.vue     |   6 +-
 src/views/users/UserGroupList.vue             |   4 +-
 src/views/users/UserList.vue                  |  64 ++-----
 15 files changed, 192 insertions(+), 394 deletions(-)
 create mode 100644 src/components/DataTable/index.vue
 delete mode 100644 src/components/ListTables/index-backup.vue

diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
new file mode 100644
index 000000000..c2f5b0bf8
--- /dev/null
+++ b/src/components/DataTable/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <ElDatableTable v-bind="tableConfig"></ElDatableTable>
+</template>
+
+<script>
+import { default as ElDatableTable } from '@/components/el-data-table'
+export default {
+  name: 'DataTable',
+  components: {
+    ElDatableTable
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      defaultConfig: {
+        axiosConfig: {
+          raw: 1,
+          params: {
+            draw: 1
+          }
+        },
+        dataPath: 'results',
+        totalPath: 'count',
+        saveQuery: false, // 关闭路径保存查询参数
+        persistSelection: true, // 切换页面 已勾选项不会丢失
+        hasEdit: false, // 有编辑按钮
+        hasDelete: false,
+        hasAction: false, // 是否有更多操作
+        hasUpload: false,
+        hasNew: false,
+        // editText: this.$t('action.update'), // 编辑按钮文案
+        tableAttrs: {
+          stripe: true, // 斑马纹表格
+          border: true, // 表格边框
+          fit: true // 宽度自适应
+        },
+        pageCount: 5,
+        paginationLayout: 'total, sizes, prev, pager, next',
+        transformQuery: query => {
+          if (query.page && query.size) {
+            const offset = query.page * query.size
+            const limit = query.size
+            query.offset = offset
+            query.limit = limit
+            delete query['page']
+            delete query['size']
+          }
+          return query
+        }
+      }
+    }
+  },
+  computed: {
+    tableConfig() {
+      const config = Object.assign(this.defaultConfig, this.config)
+      console.log(config)
+      return config
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .el-table /deep/ .el-table__row > td {
+    line-height: 1.5;
+    padding: 8px;
+  }
+  .el-table /deep/ .el-table__row > td> div > span {
+    text-overflow: ellipsis;
+    -moz-text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .el-table /deep/ .el-table__header > thead > tr >th {
+    padding: 8px;
+    background-color: #F5F5F6;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  .table{
+    margin-top: 15px;
+  }
+
+  //分页
+  .el-pagination /deep/ .el-pagination__total{
+    float: left;
+  }
+
+  .el-pagination /deep/ .el-pagination__sizes{
+    float: left;
+  }
+  //修改颜色
+  // .el-button--text{
+  //   color: #409EFF;
+  // }
+</style>
diff --git a/src/components/ListTables/headeraction.vue b/src/components/ListTables/headeraction.vue
index 9a74c45c0..456ccac72 100644
--- a/src/components/ListTables/headeraction.vue
+++ b/src/components/ListTables/headeraction.vue
@@ -13,7 +13,18 @@
 <script>
 export default {
   prop: {
-
+    size: {
+      style: String,
+      default: 'small'
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    moreActions: {
+      type: Array,
+      default: () => []
+    }
   },
   props: {
     hasSelection: {
diff --git a/src/components/ListTables/index-backup.vue b/src/components/ListTables/index-backup.vue
deleted file mode 100644
index 84a71af41..000000000
--- a/src/components/ListTables/index-backup.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div>
-    <div class="tableTitle">
-      <div class="tableTitle-menu">
-        <el-button size="small" type="primary" style="margin-left:12px;" @click="$router.push({ name: tableroute, params:{id:'create'} })">{{ tablebutton }}</el-button>
-        <el-select v-model="value" size="small" placeholder="更多操作" style="margin-left:8px">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-            :disabled="item.disabled"
-          />
-        </el-select>
-        <el-dropdown style="float:right;margin-right:12px;margin-left:8px;">
-          <el-button size="small" type="default">
-            CSV<i class="el-icon-arrow-down el-icon--right" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>导入</el-dropdown-item>
-            <el-dropdown-item>导出</el-dropdown-item>
-            <el-dropdown-item>更新</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <!-- bug 待修复 -->
-        <div style="display:inline-block;float:right">
-          <el-input v-model="input3" placeholder="请输入内容" class="input-with-select" size="small">
-            <el-select slot="prepend" v-model="select" placeholder="请选择">
-              <el-option label="餐厅名" value="1" />
-              <el-option label="订单号" value="2" />
-              <el-option label="用户电话" value="3" />
-            </el-select>
-            <i slot="prefix" class="el-input__icon el-icon-search" />
-          </el-input>
-        </div>
-      </div>
-    </div>
-    <div class="userTableBasic">
-      <slot />
-    </div>
-    <div class="block">
-      <el-pagination
-        background
-        :current-page="currentPage"
-        :page-sizes="[10, 25, 50, 100]"
-        :page-size="pageSize"
-        layout="sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    tablebutton: {
-      type: String,
-      default: () => { return 'tablebutton' }
-    },
-    tableroute: {
-      type: String,
-      default: () => { return '404' }
-    },
-    pageSize: {
-      type: Number,
-      default: () => { return 10 }
-    },
-    currentPage: {
-      type: Number,
-      default: () => { return 1 }
-    },
-    offset: {
-      type: Number,
-      default: () => { return 0 }
-    },
-    total: {
-      type: Number,
-      default: () => { return 1 }
-    }
-
-  },
-  data() {
-    return {
-      select: '',
-      input3: '',
-      options: [{
-        value: '1',
-        label: '批量删除'
-      }, {
-        value: '2',
-        disabled: true,
-        label: '批量更新'
-
-      }, {
-        value: '3',
-        label: '禁用所选'
-      }, {
-        value: '4',
-        label: '激活所选'
-      }],
-      value: ''
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('SizeChange', val)
-    },
-    handleCurrentChange(val) {
-      this.$emit('CurrentChange', val)
-    },
-    MutiSelectAction(val) {
-      this.$emit('MutiSelectChange', val)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-//重置面包屑字体大小
-.el-breadcrumb {
-  padding: 20px;
-  background-color: #fff;
-}
-.el-input{
-  width:inherit;
-}
-.el-breadcrumb__item{
-  font-size:13px !important;
-}
-.el-header{
-  background-color: #ffffff;
-  //border-bottom: 1px solid #e7eaec !important;
-}
-.userTable{
-  // margin-left:1%;
-}
-.userTableBasic{
-  margin-right:12px;
-  margin-left:12px;
-  padding-bottom:1%;
-  background-color: #fff;
-}
-.tableTitle{
-  padding-bottom:1%;
-  .tableTitle-menu{
-    padding-top:15px;
-  }
-}
-.block{
-  background-color: #fff;
-  text-align: center;
-  width: 98%;
-  margin-left:1%;
-  padding-bottom: 1%;
-}
-.el-table /deep/ td, .el-table /deep/ th {
-  padding: 8px 0 !important;
-  /*line-height: 1.42857;*/
-  /*padding: 8px;*/
-  /*vertical-align: top;*/
-  /*border: 1px solid #e7e7e7;*/
-}
-</style>
diff --git a/src/components/ListTables/table.vue b/src/components/ListTables/table.vue
index 99fb5bcf0..1c77e2b83 100644
--- a/src/components/ListTables/table.vue
+++ b/src/components/ListTables/table.vue
@@ -12,6 +12,7 @@
         v-loading="loading"
         :data="tabledata"
         stripe
+        border
         @selection-change="handleSelectionChange"
       >
         <el-table-column
@@ -20,7 +21,7 @@
           :align="align"
           width="42px"
           :header-align="align"
-        ></el-table-column>
+        />
         <el-table-column
           v-for="col of columns"
           :key="col.props"
@@ -30,7 +31,7 @@
           :header-align="align"
         >
           <template slot-scope="scope">
-            <el-button v-if="col.link" type="text" size="small" style="font-size:14px" @click="$router.push({name: col.link, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-button>
+            <el-link v-if="col.link" type="success" :underline="false" size="small" style="font-size:14px" @click="$router.push({name: col.link, params: { id: scope.row.id }})">{{ scope.row[col.key] }}</el-link>
             <span v-else>{{ scope.row[col.key] }}</span>
           </template>
         </el-table-column>
@@ -68,7 +69,7 @@
         :pager-count="5"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-      ></el-pagination>
+      />
     </div>
   </div>
 </template>
@@ -77,12 +78,14 @@
 /* eslint-disable no-unused-vars */
 import search from './search'
 import headeraction from './headeraction'
+// import ActionsGroup from '../ActionsGroup'
 const _vm = this
 export default {
   name: 'Tables',
   components: {
     search,
     headeraction
+    // ActionsGroup,
   },
   props: {
     getData: {
@@ -191,7 +194,8 @@ export default {
 <style lang="less" scoped>
 
 .el-table /deep/ .el-table__row > td {
-  padding: 0 !important;
+  line-height: 1.5;
+  padding: 8px;
 }
 .el-table /deep/ .el-table__row > td> div > span {
   text-overflow: ellipsis;
@@ -200,9 +204,10 @@ export default {
   white-space: nowrap;
 }
 .el-table /deep/ .el-table__header > thead > tr >th {
-  padding:3px !important;
+  padding: 8px;
   background-color: #F5F5F6;
   font-size: 13px;
+  line-height: 1.5;
 }
 .table{
   margin-top: 15px;
diff --git a/src/components/Select2/index.vue b/src/components/Select2/index.vue
index 6eb116966..336fae3e0 100644
--- a/src/components/Select2/index.vue
+++ b/src/components/Select2/index.vue
@@ -16,8 +16,7 @@
       :key="item.value"
       :label="item.label"
       :value="item.value"
-    >
-    </el-option>
+    />
   </el-select>
 </template>
 
@@ -28,7 +27,7 @@ export default {
     'loadmore': {
       bind(el, binding) {
         // 获取element-ui定义好的scroll盒子
-        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
+        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
         SELECTWRAP_DOM.addEventListener('scroll', function() {
           /**
            * scrollHeight 获取元素内容高度(只读)
@@ -80,7 +79,7 @@ export default {
         hasMore: true
       },
       defaultMakeParams: params => {
-        const page = params.page || 1;
+        const page = params.page || 1
         return {
           search: params.search,
           offset: (page - 1) * 10,
diff --git a/src/components/el-data-table/el-data-table.vue b/src/components/el-data-table/el-data-table.vue
index ab4d640d2..95a9da8a1 100644
--- a/src/components/el-data-table/el-data-table.vue
+++ b/src/components/el-data-table/el-data-table.vue
@@ -5,132 +5,6 @@
       <slot name="no-data" />
     </template>
     <template v-else>
-      <!-- 搜索字段 -->
-      <!-- @submit.native.prevent -->
-      <!-- 阻止表单提交的默认行为 -->
-      <!-- https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 -->
-      <!-- <el-form-renderer
-        v-if="hasSearchForm"
-        ref="searchForm"
-        :content="_searchForm"
-        inline
-        @submit.native.prevent
-      >
-        <slot
-          v-for="slot in searchLocatedSlotKeys"
-          :slot="slot.replace('search:', 'id:')"
-          :name="slot"
-        />
-        @slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
-      <!-- <slot name="search" />
-        <el-form-item>
-          https://github.com/ElemeFE/element/pull/5920-->
-      <!-- <el-button
-            native-type="submit"
-            type="primary"
-            :size="buttonSize"
-            @click="search"
-          >查询</el-button>
-          <el-button :size="buttonSize" @click="resetSearch">重置</el-button>
-        </el-form-item>
-      </el-form-renderer> -->
-
-      <el-form v-if="hasHeader">
-        <el-form-item>
-          <el-button
-            v-if="hasNew"
-            type="primary"
-            :size="buttonSize"
-            @click="onDefaultNew"
-          >{{ newText }}</el-button>
-          <template v-for="(btn, i) in headerButtons">
-            <self-loading-button
-              v-if="'show' in btn ? btn.show(selected) : true"
-              :key="i"
-              :disabled="'disabled' in btn ? btn.disabled(selected) : false"
-              :click="btn.atClick"
-              :params="selected"
-              :callback="getList"
-              :size="buttonSize"
-              v-bind="btn"
-            >
-              {{
-                typeof btn.text === 'function' ? btn.text(selected) : btn.text
-              }}
-            </self-loading-button>
-          </template>
-          <el-button
-            v-if="hasSelect && hasDelete"
-            type="danger"
-            :size="buttonSize"
-            :disabled="selected.length === 0 || (single && selected.length > 1)"
-            @click="onDefaultDelete(single ? selected[0] : selected)"
-          >{{ deleteText }}</el-button>
-          <!-- @dropdown 修改点: 是否有Actions按钮 -->
-          <el-dropdown v-if="hasAction" class="slotaction">
-            <el-button size="small" :disabled="selected.length>0?false:true">
-              更多菜单<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>批量删除</el-dropdown-item>
-              <el-dropdown-item>批量更新</el-dropdown-item>
-              <el-dropdown-item>禁用所选</el-dropdown-item>
-              <el-dropdown-item>激活所选</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <!-- 样式bug -->
-          <el-dropdown v-if="hasUpload" class="slotupload" style="float:right;">
-            <el-button size="small">
-              CSV<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>上传</el-dropdown-item>
-              <el-dropdown-item>下载</el-dropdown-item>
-              <el-dropdown-item>更新</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <el-form-renderer
-            v-if="hasSearchForm"
-            ref="searchForm"
-            class="slotsearch"
-            style="float:right;"
-            :content="_searchForm"
-            inline
-            @submit.native.prevent
-          >
-            <slot
-              v-for="slot in searchLocatedSlotKeys"
-              :slot="slot.replace('search:', 'id:')"
-              :name="slot"
-            />
-            <!--@slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
-            <slot name="search" />
-            <el-form-item style="display:none">
-              <!--https://github.com/ElemeFE/element/pull/5920-->
-              <el-button
-                native-type="submit"
-                type="primary"
-                :size="buttonSize"
-                @click="search"
-              >查询</el-button>
-              <el-button :size="buttonSize" @click="resetSearch">重置</el-button>
-            </el-form-item>
-          </el-form-renderer>
-          <!--@slot 额外的header内容, 当headerButtons不满足需求时可以使用，作用域传入selected -->
-          <slot name="header" :selected="selected" />
-          <!--@collapse 自定义折叠按钮, 默认的样式文案不满足时可以使用，scope 默认返回当前折叠状态 Boolean -->
-          <slot name="collapse" :isSearchCollapse="isSearchCollapse">
-            <el-button
-              v-if="canSearchCollapse"
-              type="default"
-              :size="buttonSize"
-              :icon="`el-icon-arrow-${isSearchCollapse ? 'down' : 'up'}`"
-              @click="isSearchCollapse = !isSearchCollapse"
-            >{{ isSearchCollapse ? '展开' : '折叠' }}搜索</el-button>
-          </slot>
-        </el-form-item>
-      </el-form>
-
       <el-table
         ref="table"
         v-loading="loading"
@@ -177,7 +51,8 @@
               v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
               :key="col.prop"
               v-bind="{align: columnsAlign, ...col}"
-            />
+            >
+            </el-data-table-column>
           </template>
 
           <!--无选择-->
@@ -217,32 +92,18 @@
 
         <!--非树-->
         <template v-else>
-          <!-- 硬核Hack修改 -->
           <el-data-table-column
-            key="selection-key"
-            v-bind="{align: columnsAlign, ...columns[0]}"
-          />
-          <el-data-table-column
-            key="columns-url"
-            v-bind="{align: columnsAlign, ...columns[1]}"
-          >
-            <template slot-scope="scope">
-              <!-- 硬编码到ID -->
-              <el-button type="text" size="small" style="font-size:14px" @click="$router.push({name: columns[1].url, params: { id: scope.row.id }})">{{ scope.row.name }}</el-button>
-            </template>
-          </el-data-table-column>
-          <el-data-table-column
-            v-for="col in columns.filter((c, i) => i !== 0&& i !=1) "
+            v-for="col in columns"
             :key="col.prop"
             v-bind="{align: columnsAlign, ...col}"
-          />
+          >
+          </el-data-table-column>
         </template>
 
         <!--默认操作列-->
         <el-data-table-column
           v-if="hasOperation"
-          label="操作"
-
+          :label="$tc('action')"
           v-bind="{align: columnsAlign, ...operationAttrs}"
         >
           <template slot-scope="scope">
@@ -315,6 +176,7 @@
         :total="total"
         style="text-align: right; padding: 10px 0;"
         :layout="paginationLayout"
+        :pager-count="paginationPagerCount"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
@@ -424,6 +286,13 @@ export default {
         return []
       }
     },
+    /**
+     * 请求之前可以转换query的内容, 提供一种方式可以让自定义query, 如有的分页用的是offset机制, offset = page * size, limit = size
+     */
+    transformQuery: {
+      type: Function,
+      default: null
+    },
     /**
      * 查询字段渲染, 配置参考el-form-renderer
      * @link https://femessage.github.io/el-form-renderer/
@@ -653,6 +522,10 @@ export default {
       type: Array,
       default: () => [10, 20, 30, 40, 50]
     },
+    paginationPagerCount: {
+      type: Number,
+      default: 5
+    },
     /**
      * 分页组件的每页显示个数选择器默认选项，对应element-ui pagination的page-size属性
      * @link https://element.eleme.cn/2.4/#/zh-CN/component/pagination
@@ -862,6 +735,13 @@ export default {
       default() {
         return {}
       }
+    },
+    /*
+    * 设置默认对齐方式
+    */
+    defaultAlign: {
+      type: String,
+      default: 'center'
     }
   },
   data() {
@@ -901,7 +781,7 @@ export default {
         return 'center'
       } else {
         // 默认居中 //修改点
-        return 'center'
+        return this.defaultAlign
       }
     },
     routerMode() {
@@ -969,6 +849,8 @@ export default {
     }
   },
   mounted() {
+    console.log(this.url)
+    console.log(this.com)
     if (this.saveQuery) {
       const query = queryUtil.get(location.href)
       if (query) {
@@ -991,7 +873,6 @@ export default {
      */
     getList({ loading = true } = {}) {
       const { url } = this
-
       if (!url) {
         console.warn('DataTable: url 为空, 不发送请求')
         return
@@ -1022,6 +903,10 @@ export default {
           return obj
         }, {})
 
+      if (this.transformQuery) {
+        query = this.transformQuery(query)
+      }
+
       const queryStr =
         (url.indexOf('?') > -1 ? '&' : '?') +
         queryUtil.stringify(query, '=', '&')
diff --git a/src/layout/components/BaseDetailPage/index.vue b/src/layout/components/BaseDetailPage/index.vue
index c7359715a..d7934a651 100644
--- a/src/layout/components/BaseDetailPage/index.vue
+++ b/src/layout/components/BaseDetailPage/index.vue
@@ -4,7 +4,7 @@
       {{ title }}
     </span>
     <span slot="headingRightSide">
-      <ActionsGroup slot="headingRightSide" :actions="pageActions"></ActionsGroup>
+      <ActionsGroup slot="headingRightSide" :actions="pageActions" />
     </span>
 
     <div slot="content">
@@ -58,7 +58,7 @@ export default {
         }
       ]
     }
-  },
+  }
 }
 </script>
 
diff --git a/src/layout/components/IBox.vue b/src/layout/components/IBox.vue
index 4afd3b0ab..baf79aa3f 100644
--- a/src/layout/components/IBox.vue
+++ b/src/layout/components/IBox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-card class="ibox" shadow="never">
-    <div slot="header" class="clearfix ibox-title">
+    <div slot="header" class="clearfix ibox-title" v-if="title">
       <h5>{{ title }}</h5>
       <div class="ibox-tools">
         <a class="collapse-link">
@@ -24,7 +24,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: () => { return 'Title' }
+      default: () => null
     }
   }
 }
diff --git a/src/layout/components/NavHeader/AccountDropdown.vue b/src/layout/components/NavHeader/AccountDropdown.vue
index ab9b46e75..47ed02ffe 100644
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -2,7 +2,7 @@
   <div class="header-tools header-profile">
     <el-dropdown>
       <span class="el-dropdown-link">
-         <el-avatar :src="avatarUrl" class="header-avatar"></el-avatar>
+        <el-avatar :src="avatarUrl" class="header-avatar" />
         {{ currentUser.name }}
         <i class="el-icon-arrow-down el-icon--right" />
       </span>
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index 3bd29d8f6..87d07afba 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -7,7 +7,7 @@
       </span>
     </PageHeading>
     <PageContent>
-      <slot name="content" />
+      <slot name="default"/>
     </PageContent>
   </div>
 </template>
@@ -21,7 +21,6 @@ export default {
   components: {
     PageHeading,
     PageContent
-    // PageSubMenu,
   },
   props: {
     title: {
diff --git a/src/layout/components/SubMenuPage/index.vue b/src/layout/components/SubMenuPage/index.vue
index b0e78fccf..d513662e8 100644
--- a/src/layout/components/SubMenuPage/index.vue
+++ b/src/layout/components/SubMenuPage/index.vue
@@ -45,7 +45,7 @@ export default {
   },
   mounted() {
     console.log(this.submenu)
-  },
+  }
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
index e3aea3e1f..c4910939c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,23 +36,8 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
-// vue select
-import vSelect from 'vue-select'
-Vue.component('v-select', vSelect)
-
-import ElDataTable from '@/components/el-data-table/el-data-table.vue'
-import ElFormRenderer from '@/components/el-form-renderer/el-form-renderer.vue'
-import {
-  Message,
-  MessageBox
-} from 'element-ui'
 import service from '@/utils/request'
 
-Vue.component('el-data-table', ElDataTable)
-Vue.component('el-form-renderer', ElFormRenderer)
-Vue.prototype.$confirm = MessageBox.confirm
-// show tips
-Vue.prototype.$message = Message
 // if the table component cannot access `this.$axios`, it cannot send request
 Vue.prototype.$axios = service
 
diff --git a/src/views/users/UserGroupDetail/index.vue b/src/views/users/UserGroupDetail/index.vue
index b3322df11..d0a65537b 100644
--- a/src/views/users/UserGroupDetail/index.vue
+++ b/src/views/users/UserGroupDetail/index.vue
@@ -3,16 +3,16 @@
     <div slot="info">
       <el-row :gutter="20">
         <el-col :span="14">
-          <DetailCard :title="cardTitle" :items="detailItems"></DetailCard>
+          <DetailCard :title="cardTitle" :items="detailItems" />
         </el-col>
         <el-col :span="10">
           <el-card class="box-card primary">
             <div slot="header" class="clearfix">
-              <i class="fa fa-user"></i>
+              <i class="fa fa-user" />
               <span>组下用户</span>
             </div>
             <div>
-              <Select2 v-model="value" :url="url"></Select2>
+              <Select2 v-model="value" :url="url" />
             </div>
           </el-card>
         </el-col>
diff --git a/src/views/users/UserGroupList.vue b/src/views/users/UserGroupList.vue
index 197bb533d..67144db0f 100644
--- a/src/views/users/UserGroupList.vue
+++ b/src/views/users/UserGroupList.vue
@@ -1,8 +1,8 @@
 <template>
   <Page>
-    <template slot="content">
+    <template>
       <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card >
+      <el-card>
         <tables v-bind="tableConfig" />
       </el-card>
     </template>
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index 671a8eca9..d74d5e0cf 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -1,43 +1,31 @@
 <template>
   <Page>
-    <IBox :title="$t('route.UserList')">
-      <el-data-table v-bind="tableConfig" :on-new="onNew" style="margin:0 12px 12px 12px;" />
+    <IBox>
+      <DataTable :config="tableConfig" />
     </IBox>
   </Page>
 </template>
 
 <script>
 import { IBox, Page } from '@/layout/components'
+import DataTable from '@/components/DataTable'
 
 export default {
   components: {
     IBox,
-    Page
+    Page,
+    DataTable
   },
   data() {
     return {
       tableConfig: {
-        axiosConfig: {
-          raw: 1
-        },
         url: '/api/v1/users/users/',
-        dataPath: 'results',
-        totalPath: 'count',
-        pageSizeKey: 'limit',
-        pageKey: 'offset', // 数据偏移量
-        saveQuery: false, // 关闭路径保存查询参数
-        persistSelection: true, // 切换页面 已勾选项不会丢失
-        hasEdit: false, // 有编辑按钮
-        newText: '创建',
-        hasDelete: false,
-        hasAction: true, // 是否有更多操作
-        hasUpload: false,
-        hasNew: true,
-        // editText: this.$t('action.update'), // 编辑按钮文案
-        tableAttrs: {
-          stripe: true, // 斑马纹表格
-          border: true, // 表格边框
-          fit: true // 宽度自适应
+        defaultAlign: 'left',
+        operationAttrs: {
+          label: 'Operation',
+          prop: 'operation',
+          key: 'prop',
+          align: 'center',
         },
         extraButtons: [
           {
@@ -58,29 +46,22 @@ export default {
             }
           }
         ],
-        searchForm: [
-          {
-            type: 'input',
-            id: 'search', // 发起请求附带的查询参数
-            width: '200px',
-            el: { placeholder: '搜索', clearable: true, size: 'small' },
-            rules: [{ required: false, trigger: 'blur', max: 12 }]
-          }
-        ],
+        align: 'left',
         columns: [
-          { type: 'selection' },
+          { type: 'index' },
           // Bug
           // 应该让我插入Slot,使这个用户名可点击
           {
             prop: 'name',
             label: this.$t('users.name'),
             sortable: true, // 可排序
-            url: 'UserDetail' // 第一个函数指定 路由Template
+            type: 'link',
+            // url: 'UserDetail' // 第一个函数指定 路由Template
           },
           {
             prop: 'username',
             label: this.$t('users.username'),
-            sortable: true
+            sortable: true,
           },
           {
             prop: 'role',
@@ -91,7 +72,11 @@ export default {
           {
             prop: 'group',
             label: this.$t('users.usergroup'),
-            sortable: true
+            sortable: true,
+            align: 'left',
+            formatter: row => {
+              return <a href='http://qq.com' target='_blank'>hello</a>
+            }
           },
           {
             prop: 'source',
@@ -101,13 +86,6 @@ export default {
         ]
       }
     }
-  },
-  created() {
-  },
-  methods: {
-    onNew: () => {
-      alert('创建')
-    }
   }
 }
 </script>