[update]修改El-table

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

@@ -9,7 +9,7 @@
       <!-- @submit.native.prevent -->
       <!-- 阻止表单提交的默认行为 -->
       <!-- https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2 -->
-      <el-form-renderer
+      <!-- <el-form-renderer
         v-if="hasSearchForm"
         ref="searchForm"
         :content="_searchForm"
@@ -21,11 +21,11 @@
           :slot="slot.replace('search:', 'id:')"
           :name="slot"
         />
-        <!--@slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
+        @slot 额外的搜索内容, 当searchForm不满足需求时可以使用-->
-        <slot name="search" />
+      <!-- <slot name="search" />
         <el-form-item>
-          <!--https://github.com/ElemeFE/element/pull/5920-->
+          https://github.com/ElemeFE/element/pull/5920-->
-          <el-button
+      <!-- <el-button
             native-type="submit"
             type="primary"
             :size="buttonSize"
@@ -33,7 +33,7 @@
           >查询</el-button>
           <el-button :size="buttonSize" @click="resetSearch">重置</el-button>
         </el-form-item>
-      </el-form-renderer>
+      </el-form-renderer> -->
 
       <el-form v-if="hasHeader">
         <el-form-item>
@@ -66,10 +66,58 @@
             :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
@@ -169,8 +217,22 @@
 
         <!--非树-->
         <template v-else>
+          <!-- 硬核Hack修改 -->
           <el-data-table-column
-            v-for="col in columns"
+            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) "
             :key="col.prop"
             v-bind="{align: columnsAlign, ...col}"
           />
@@ -436,6 +498,20 @@ export default {
       type: Boolean,
       default: true
     },
+    /**
+     * 是否有动作按钮
+     */
+    hasAction: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否有动作按钮
+     */
+    hasUpload: {
+      type: Boolean,
+      default: true
+    },
     /**
      * 是否有编辑按钮
      */
@@ -813,14 +889,12 @@ export default {
     hasSelect() {
       return this.columns.length && this.columns[0].type === 'selection'
     },
-
     selectable() {
       if (this.hasSelect && this.columns[0].selectable) {
         return this.columns[0].selectable
       }
       return () => true
     },
-
     columnsAlign() {
       if (this.columns.some(col => col.columns && col.columns.length)) {
         // 多级表头默认居中
@@ -1091,8 +1165,8 @@ export default {
     // 弹窗相关
     // 除非树形结构在操作列点击新增, 否则 row 是 MouseEvent
     onDefaultNew(row) {
-      this.row = row
+      // 屏蔽默认New方法
-      this.$refs.dialog.show(dialogModes.new)
+      this.onNew()
     },
     onDefaultView(row) {
       this.row = row

src/i18n/i18n.js

@@ -11,4 +11,8 @@ const i18n = new VueI18n({
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 重点: 为了实现element插件的多语言切换
 
+Vue.prototype.$ti = (key) => {
+  i18n.t(key.toLowerCase)
+}
+
 export default i18n

src/layout/components/Page/PageContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper-content">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

src/layout/components/Page/PageHeading.vue

@@ -4,7 +4,7 @@
       <div class="page-heading-left-title">
         <slot><h2>{{ title }}</h2></slot>
       </div>
-      <Breadcrumb></Breadcrumb>
+      <Breadcrumb />
     </el-col>
     <el-col :span="4" />
   </el-row>

src/layout/components/Page/index.vue

@@ -4,7 +4,7 @@
       <slot name="title">{{ pageTitle }}</slot>
     </PageHeading>
     <PageContent>
-      <slot name="content"></slot>
+      <slot name="content" />
     </PageContent>
   </div>
 </template>

src/layout/components/index.js

@@ -4,6 +4,5 @@ export { default as AppMain } from './AppMain'
 export { default as Page } from './Page'
 export { default as ListTables } from './ListTables'
 export { default as TagsView } from './TagsView'
-export { default as ElDataTable } from './el-data-table'
 export { default as Footer } from './Footer'
 export { default as IBox } from './IBox'

src/main.js

@@ -36,8 +36,8 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
-import ElDataTable from '@/layout/components/el-data-table/el-data-table.vue'
+import ElDataTable from '@/components/el-data-table/el-data-table.vue'
-import ElFormRenderer from '@/layout/components/el-form-renderer/el-form-renderer.vue'
+import ElFormRenderer from '@/components/el-form-renderer/el-form-renderer.vue'
 import {
   Message,
   MessageBox

src/views/users/UserList.vue

@@ -1,20 +1,6 @@
 <template>
   <IBox :title="$t('route.UserList')">
-    <el-data-table v-bind="tableConfig" style="margin:0 12px 12px 12px;">
+    <el-data-table v-bind="tableConfig" :on-new="onNew" style="margin:0 12px 12px 12px;" />
-      <template v-slot:header="{selected}">
-        <el-dropdown>
-          <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>
-      </template>
-    </el-data-table>
   </IBox>
 </template>
 
@@ -41,6 +27,8 @@ export default {
         hasEdit: false, // 有编辑按钮
         newText: '创建',
         hasDelete: false,
+        hasAction: true, // 是否有更多操作
+        hasUpload: false,
         hasNew: true,
         // editText: this.$t('action.update'), // 编辑按钮文案
         tableAttrs: {
@@ -67,6 +55,15 @@ export default {
             }
           }
         ],
+        searchForm: [
+          {
+            type: 'input',
+            id: 'search', // 发起请求附带的查询参数
+            width: '200px',
+            el: { placeholder: '搜索', clearable: true, size: 'small' },
+            rules: [{ required: false, trigger: 'blur', max: 12 }]
+          }
+        ],
         columns: [
           { type: 'selection' },
           // Bug
@@ -74,7 +71,8 @@ export default {
           {
             prop: 'name',
             label: this.$t('users.name'),
-            sortable: true // 可排序
+            sortable: true, // 可排序
+            url: 'UserDetail' // 第一个函数指定 路由Template
           },
           {
             prop: 'username',
@@ -104,7 +102,9 @@ export default {
   created() {
   },
   methods: {
-
+    onNew: () => {
+      alert('创建')
+    }
   }
 }
 </script>