perf: 优化平铺查询模式下自定义按钮显示位置

BoBoooooo · Mar 22, 2021 · 805bbff · 805bbff
1 parent 7853c58
commit 805bbff
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.2-2",
+  "version": "0.9.2-3",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -27,11 +27,11 @@
           <slot name="append"></slot>
         </template>
         <template #btnBarPrevBtn>
-          <slot name="btnBarPrevBtn" />
           <!-- 批量删除按钮 -->
           <el-button v-if="view.btnDel" @click="btnDeletesOnClick" type="danger" size="mini" icon="el-icon-delete">{{ text.multiDel }}</el-button>
           <!-- 添加按钮 -->
           <el-button v-if="view.btnAdd" type="primary" icon="el-icon-plus" size="mini" @click.stop="btnAdd()">{{ text.add }}</el-button>
+          <slot name="btnBarPrevBtn" />
         </template>
         <!-- 列表头添加按钮 -->
         <template #_action_header v-if="view.btnAddOnColumnHeader">

diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
@@ -18,7 +18,10 @@
       <h4 class="title">{{ tableTitle }}</h4>
     </div>
     <!-- table右上角按钮 -->
-    <div class="btn-bar" v-if="searchMode === 'popover'">
+    <div class="btn-bar"
+    :class="{
+      'btn-bar-absolute': searchMode === 'cover'
+    }">
       <slot name="btnBarPrevBtn" />
     </div>
     <SearchForm
@@ -33,12 +36,6 @@
       :isLoading="loading"
       @clear="fetchHandler(true)"
     >
-      <template v-if="searchMode === 'cover'">
-        <!-- table右上角按钮 -->
-        <div class="btn-bar">
-          <slot name="btnBarPrevBtn" />
-        </div>
-      </template>
     </SearchForm>
     <!-- 表格主体 -->
     <el-table v-loading.lock="loading" v-bind="$attrs" v-on="tableListeners" :height="tableHeight" :max-height="maxHeight" ref="tableRefs" :row-key="rowKey" :data="tableData">
@@ -483,6 +480,14 @@ export default defineComponent({
       top: 130px;
       left: 10px;
     }
+    .btn-bar-absolute{
+      float:none !important;
+      top: 132px;
+      right: 175px;
+      width: auto;
+      position: absolute;
+      text-align: right;
+    }
     .btn-bar {
       float: right;
       width: auto;

diff --git a/src/component/pro-table/src/SearchForm.vue b/src/component/pro-table/src/SearchForm.vue
@@ -22,7 +22,6 @@
     <template v-else>
       <!-- 高级查询表单 -->
       <SeniorSearchFormCover v-if="showSeniorSearchFormButton" :remoteFuncs="remoteFuncs" @fetchSearch="getFetchParamsSearch" :columns="columns">
-        <slot></slot>
       </SeniorSearchFormCover>
     </template>
 

diff --git a/src/component/pro-table/src/SeniorSearchFormCover.vue b/src/component/pro-table/src/SeniorSearchFormCover.vue
@@ -7,10 +7,9 @@
 <template>
   <div ref="container">
     <GenerateForm ref="generateDialogForm" :data="searchFormJson" class="form" :remote="remoteFuncs" :entity.sync="entity" />
-    <slot></slot>
     <div style="float: right">
-      <el-button size="mini" icon="el-icon-delete" @click="btnRemoveOnClick()">清空</el-button>
       <el-button size="mini" type="primary" icon="el-icon-search" @click="getSearchFormData()">查询</el-button>
+      <el-button size="mini" icon="el-icon-delete" @click="btnRemoveOnClick()">清空</el-button>
       <el-tooltip class="item" effect="dark" :content="collpaseButtonText" placement="bottom">
         <el-button size="mini" v-if="formDesign.list.length > 2" icon="el-icon-sort" style="float: right; margin-right: 10px" @click="collpase()">更多查询</el-button>
       </el-tooltip>