[Update] 暂提

src/components/ActionsGroup/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div :class="grouped ? 'el-button-group' : ''">
-    <el-button v-for="item in actions" :key="item.name" :type="item.type" :size="size" :disabled="item.disabled" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }}</el-button>
+    <el-button v-for="item in actions" :key="item.name" :size="size" v-bind="item" @click="handleClick(item.name)">
+      <i v-if="item.fa" :class="'fa ' + item.fa"></i>
+      {{ item.title }}
+    </el-button>
     <el-dropdown v-if="moreActions.length > 0" trigger="click">
       <el-button :size="size" class="btn-more-actions">
-        {{ this.$tc('More actions') }}<i class="el-icon-arrow-down el-icon--right" />
+        {{ this.$tc('More actions') }}<i class="el-icon-arrow-down el-icon--right"></i>
       </el-button>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="item in moreActions" :key="item.name" :icon="item.icon" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
+        <el-dropdown-item v-for="item in moreActions" :key="item.name" v-bind="item" @click="handleClick(item.name)">{{ item.title }} </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -854,8 +854,6 @@ export default {
        * @property {array} rows - 已选中的行数据的数组
        */
       this.$emit('selection-change', val)
-      console.log('Selected', this.selected)
-      console.log('Val', val)
     }
   },
   mounted() {

src/components/DataTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElDatableTable class="el-table" v-bind="tableConfig"></ElDatableTable>
+  <ElDatableTable class="el-table" v-bind="tableConfig" v-on="$listeners"></ElDatableTable>
 </template>
 
 <script>
@@ -25,6 +25,7 @@ export default {
             display: 1
           }
         },
+        defaultAlign: 'left',
         dataPath: 'results',
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数

src/components/ListTable/HeaderActions.vue

@@ -1,60 +0,0 @@
-<template>
-  <ActionsGroup :actions="tActions" :more-actions="tMoreActions" @clickAction="handleClickAction" class="header-action"></ActionsGroup>
-</template>
-
-<script>
-import ActionsGroup from '../ActionsGroup'
-export default {
-  name: 'HeaderActions',
-  components: {
-    ActionsGroup
-  },
-  props: {
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    moreActions: {
-      type: Array,
-      default: () => ([])
-    },
-    hasSelection: {
-      type: Boolean,
-      default: () => true
-    },
-    selectDisable: {
-      type: Boolean,
-      default: () => true
-    }
-  },
-  data() {
-    return {
-      value: ''
-    }
-  },
-  computed: {
-    tActions() {
-      console.log('actions', this.actions)
-      return this.actions
-    },
-    tMoreActions() {
-      console.log(this.moreActions)
-      return this.moreActions
-    }
-  },
-  methods: {
-    handleClickAction(item) {
-      console.log(this)
-      this.$emit('clickAction', item)
-    },
-    handleAction() {
-      this.$emit('actionClick', this.value)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
-

src/components/ListTable/TableAction.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="table-header">
+    <slot name="header">
+      <!--TODO: 事件交互 -->
+      <div class="table-header-left-side">
+        <ActionsGroup :actions="actions" :more-actions="moreActions" class="header-action"></ActionsGroup>
+      </div>
+      <!-- TODO: 事件交互 -->
+      <div class="table-action-right-side">
+        <el-input v-model="keyword" suffix-icon="el-icon-search" :placeholder="$tc('Search')" class="right-side-item action-search" size="small" clearable @change="handleSearch" @input="handleSearch"></el-input>
+        <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item"></ActionsGroup>
+<!--        <el-button-group class="right-side-actions right-side-item">-->
+<!--          <el-button size="mini"><i class="fa fa-download"></i></el-button>-->
+<!--          <el-button size="mini"><i class="fa fa-upload"></i></el-button>-->
+<!--          <el-button size="mini"><i class="fa fa-refresh"></i></el-button>-->
+<!--        </el-button-group>-->
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script>
+import ActionsGroup from '@/components/ActionsGroup'
+export default {
+  name: 'TableAction',
+  components: {
+    ActionsGroup
+  },
+  data() {
+    return {
+      hasLeftActions: true,
+      hasSearch: true,
+      hasRightActions: true,
+      createAction: {
+        name: 'create',
+        title: this.$tc('Create'),
+        type: 'primary'
+      },
+      actions: [{
+        name: 'create',
+        title: this.$tc('Create'),
+        type: 'primary'
+      }],
+      rightSideActions: [
+        {
+          name: 'export',
+          fa: 'fa-download'
+        },
+        {
+          name: 'import',
+          fa: 'fa-upload'
+        },
+        {
+          name: 'refresh',
+          fa: 'fa-refresh'
+        }
+      ],
+      keyword: '',
+      moreActions: [
+        {
+          title: this.$tc('Delete selected'),
+          name: 'deleteSelected'
+        },
+        {
+          title: this.$tc('Update selected'),
+          name: 'updateSelected'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSearch(keyword) {
+      console.log('Search: ', keyword)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .table-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .right-side-item {
+  }
+
+  .right-side-actions >>> .el-button {
+    border: none;
+    padding: 5px;
+    font-size: 14px;
+    width: 26px;
+    height: 26px;
+    color: #888;
+    background-color: transparent;
+  }
+
+  .right-side-actions >>> .fa {
+    height: 16px;
+    width: 16px;
+  }
+
+  .right-side-actions >>> .el-button:hover {
+    background-color: rgb(0, 0, 0, 0.05);
+  }
+
+  .action-search >>> .el-input__suffix i {
+    font-weight: 500;
+    color: #888;
+  }
+
+  .right-side-actions {
+    display: flex;
+    padding-left: 10px;
+    justify-content:center;
+  }
+
+  .table-action-right-side {
+    display: flex;
+    justify-content:center;
+  }
+
+</style>

src/components/ListTable/index.vue

@@ -1,28 +1,21 @@
 <template>
   <div>
-    <div class="table-header">
+    <TableAction></TableAction>
-      <slot name="header">
+    <el-card class="table-content">
-        <!--TODO: 事件交互 -->
+      <DataTable :config="tableConfig" @selection-change="handleSelectionChange" ></DataTable>
-        <HeaderActions :actions="totalActions" :more-actions="moreActions"></HeaderActions>
+    </el-card>
-        <!-- TODO: 事件交互 -->
-        <search v-if="hasSearch" class="search" @serachAction="handleSearch" />
-      </slot>
-    </div>
-    <DataTable :config="tableConfig" class="table-content"></DataTable>
   </div>
 </template>
 
 <script>
 /* eslint-disable no-unused-vars */
-import search from './search'
 import DataTable from '../DataTable'
-import HeaderActions from './HeaderActions'
+import TableAction from './TableAction'
 export default {
   name: 'ListTable',
   components: {
-    HeaderActions,
     DataTable,
-    search,
+    TableAction
   },
   props: {
     // 定义 table 的配置
@@ -31,18 +24,7 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-    hasAction: {
+
-      type: Boolean,
-      default: true
-    },
-    hasSearch: {
-      type: Boolean,
-      default: true
-    },
-    hasCreate: {
-      type: Boolean,
-      default: true
-    },
     createTitle: {
       type: String,
       default() {
@@ -70,6 +52,7 @@ export default {
   },
   data() {
     return {
+      selectRows: []
     }
   },
   computed: {
@@ -85,16 +68,9 @@ export default {
     }
   },
   methods: {
-    handleSearch(val) {
-      this.loading = true
-      // this.getData({ search: val, draw: this.current_page, limit: this.page_size, offset: this.offset }, { row: 1 }).then(response => {
-      //   console.log(response)
-      //   this.tabledata = response.results
-      //   this.total = response.count
-      //   this.loading = false
-      // })
-    },
     handleSelectionChange(val) {
+      console.log('lIst table', val)
+      this.selectRows = val
       this.multipleSelection = val;
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
@@ -106,7 +82,7 @@ export default {
       }
     },
     handleHeaderActionClick(item) {
-      this.$emit('headerActionClick', item)
+      this.$emit('headerActionClick', item, this.selectRows)
     },
     handleDelete: (index, row) => {
     },
@@ -125,13 +101,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .table-header {
+
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
   .table-content {
-    margin-top: 15px;
+    margin-top: 10px;
   }
   //修改颜色
   // .el-button--text{

src/components/ListTable/search.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <el-input v-model="input" placeholder="搜索..." class="input-with-select" size="small" clearable @input="serachAction">
-      <el-button slot="append" icon="el-icon-search" />
-    </el-input>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      input: ''
-    }
-  },
-  methods: {
-    serachAction(val) {
-      this.$emit('serachAction', val)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
-

src/i18n/langs/cn.js

@@ -36,7 +36,8 @@ const cn = {
     'Create': '创建',
     'More actions': '更多操作',
     'Delete selected': '删除所选',
-    'Update selected': '更新所选'
+    'Update selected': '更新所选',
+    'Search': '搜索'
   },
   route: {
     'dashboard': '仪表盘',

src/styles/element-ui.scss

@@ -195,3 +195,11 @@ td .el-button.el-button--mini {
   font-weight: 600;
   background-color: inherit;
 }
+
+.el-table .ascending .sort-caret.ascending {
+  border-bottom-color: #676a6c;
+}
+
+.el-table .descending .sort-caret.descending {
+  border-top-color: #676a6c;
+}

src/views/users/UserGroupList.vue

@@ -1,11 +1,7 @@
 <template>
   <Page>
-    <template>
     <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-      <el-card>
+    <ListTable :table-config="tableConfig" />
-        <ListTable :table-config="tableConfig" :more-actions="moreActions" />
-      </el-card>
-    </template>
   </Page>
 </template>
 
@@ -40,7 +36,8 @@ export default {
           {
             prop: 'comment',
             label: this.$tc('Comment'),
-            key: 'comment'
+            key: 'comment',
+            showOverflowTooltip: true
           }
         ],
         // 写路由名字，table组件会自动传作为参数
@@ -49,16 +46,7 @@ export default {
           newClick: 'UserGroupEdit'
         }
       },
-      moreActions: [
+
-        {
-          title: this.$tc('Delete selected'),
-          name: 'deleteSelected'
-        },
-        {
-          title: this.$tc('Update selected'),
-          name: 'updateSelected'
-        }
-      ]
     }
   }
 }

src/views/users/UserList.vue

@@ -27,11 +27,7 @@ export default {
           key: 'prop',
           align: 'center'
         },
-        extraPaginationAttrs: {
+
-          background: true,
-          pagerCount: 5,
-          pageSizes: [10, 100]
-        },
         extraButtons: [
           {
             type: 'primary',
@@ -58,8 +54,7 @@ export default {
           {
             prop: 'name',
             label: this.$t('users.name'),
-            sortable: true, // 可排序
+            sortable: true // 可排序
-            type: 'link',
             // url: 'UserDetail' // 第一个函数指定 路由Template
           },
           {