[Update] 修改datatable

2025-08-02 07:27:01 +00:00 · 2020-03-31 15:49:45 +08:00 · 2020-03-31 15:49:45 +08:00 · 110f9ef9d3
commit 110f9ef9d3
parent d3bcbac7cf
15 changed files with 192 additions and 394 deletions
--- a/src/components/DataTable/index.vue
+++ 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>
--- 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: {
--- a/src/components/ListTables/index-backup.vue
+++ b/src/components/ListTables/index-backup.vue
@ -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>
--- 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;
--- 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,
--- 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, '=', '&')
--- 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>

--- 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
    }
  }
 }
--- 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>
--- 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: {
--- 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>

--- 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

--- 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>
--- 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>
--- 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>