Merge pull request #2497 from jumpserver/pr@dev@perf_table_select

pref: 优化表单选择，搜索后，已选择的会清空

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

@@ -8,12 +8,12 @@
       <el-table
         ref="table"
         v-loading="loading"
-        v-bind="tableAttrs"
         :data="data"
         :row-class-name="rowClassName"
+        v-bind="tableAttrs"
+        @select="selectStrategy.onSelect"
         v-on="$listeners"
         @selection-change="selectStrategy.onSelectionChange"
-        @select="selectStrategy.onSelect"
         @select-all="selectStrategy.onSelectAll($event, canSelect)"
         @sort-change="onSortChange"
       >
@@ -91,28 +91,28 @@
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column v-if="hasSelection" type="selection" :align="selectionAlign" :selectable="canSelect" />
+          <el-data-table-column v-if="hasSelection" :align="selectionAlign" :selectable="canSelect" type="selection" />
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
-            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
-            :filters="col.filters || null"
-            :filter-multiple="false"
             :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
+            :filter-multiple="false"
+            :filters="col.filters || null"
+            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             v-bind="{align: columnsAlign, ...col}"
           >
             <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">
               <div
                 :is="col.formatter"
                 :key="row.id"
-                :table-data="data"
-                :row="row"
+                :cell-value="row[col.prop]"
+                :col="col"
                 :column="column"
                 :index="index"
-                :url="url"
                 :reload="getList"
-                :col="col"
-                :cell-value="row[col.prop]"
+                :row="row"
+                :table-data="data"
+                :url="url"
               />
             </template>
           </el-data-table-column>
@@ -122,12 +122,12 @@
 
       <el-pagination
         v-if="hasPagination"
-        :current-page="page"
-        :page-sizes="paginationSizes"
-        :page-size="size"
-        :total="total"
         :background="paginationBackground"
+        :current-page="page"
         :layout="paginationLayout"
+        :page-size="size"
+        :page-sizes="paginationSizes"
+        :total="total"
         v-bind="extraPaginationAttrs"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
@@ -135,18 +135,18 @@
 
       <the-dialog
         ref="dialog"
-        :new-title="dialogNewTitle"
+        :button-size="buttonSize"
+        :dialog-attrs="dialogAttrs"
         :edit-title="dialogEditTitle"
-        :view-title="dialogViewTitle"
         :form="form"
         :form-attrs="formAttrs"
-        :dialog-attrs="dialogAttrs"
-        :button-size="buttonSize"
+        :new-title="dialogNewTitle"
+        :view-title="dialogViewTitle"
         @confirm="onConfirm"
       >
         <template v-slot="scope">
           <!-- @slot 表单作用域插槽。当编辑、查看时传入row；新增时row=null -->
-          <slot name="form" :row="scope.row" />
+          <slot :row="scope.row" name="form" />
         </template>
       </the-dialog>
     </template>
@@ -166,6 +166,7 @@ import getLocatedSlotKeys from './utils/extract-keys'
 import transformSearchImmediatelyItem from './utils/search-immediately-item'
 import isFalsey from './utils/is-falsey'
 import merge from 'deepmerge'
+
 const defaultFirstPage = 1
 const noPaginationDataPath = 'payload'
 
@@ -267,7 +268,8 @@ export default {
      */
     beforeSearch: {
       type: Function,
-      default() {}
+      default() {
+      }
     },
     /**
      * 单选, 适用场景: 不可以批量删除
@@ -706,7 +708,8 @@ export default {
     },
     extraPaginationAttrs: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     hasSelection: {
       type: Boolean,
@@ -1036,6 +1039,7 @@ export default {
       } else {
         this.innerQuery = merge(this.innerQuery, attrs)
       }
+      this.selected.splice(0, this.selected.length)
       return this.getList()
     },
     searchDate(attrs) {
@@ -1198,7 +1202,9 @@ export default {
         remain === 0 &&
         this.page === lastPage &&
         this.page > defaultFirstPage
-      ) { this.page-- }
+      ) {
+        this.page--
+      }
     },
 
     // 树形table相关

src/components/ListTable/TableAction/LeftSide.vue

@@ -2,8 +2,8 @@
   <DataActions
     v-if="hasLeftActions"
     :actions="iActions"
-    v-bind="$attrs"
     class="header-action"
+    v-bind="$attrs"
   />
 </template>
 
@@ -44,7 +44,8 @@ export default {
     canBulkUpdate: defaultTrue,
     handleBulkUpdate: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     },
     hasMoreActions: defaultTrue,
     tableUrl: {
@@ -53,7 +54,8 @@ export default {
     },
     reloadTable: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     },
     performBulkDelete: {
       type: Function,

src/components/ListTable/TableAction/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="table-header clearfix" :class="device">
+  <div :class="device" class="table-header clearfix">
     <slot name="header">
       <LeftSide
         v-if="hasLeftActions"
-        class="left-side"
         :selected-rows="selectedRows"
         :table-url="tableUrl"
+        class="left-side"
         v-bind="$attrs"
         v-on="$listeners"
       />
       <RightSide
         v-if="hasRightActions"
-        class="right-side"
         :selected-rows="selectedRows"
         :table-url="tableUrl"
+        class="right-side"
         v-bind="$attrs"
         v-on="$listeners"
       />
-      <div class="search" :class="searchClass">
+      <div :class="searchClass" class="search">
         <AutoDataSearch
           v-if="hasSearch"
           class="right-side-item action-search"
@@ -26,8 +26,8 @@
         />
         <DatetimeRangePicker
           v-if="hasDatePicker"
-          v-bind="datePicker"
           class="datepicker"
+          v-bind="datePicker"
           @dateChange="handleDateChange"
         />
       </div>

src/components/ListTable/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
     <TableAction
-      :table-url="tableUrl"
-      :search-table="search"
       :date-pick="handleDateChange"
-      :selected-rows="selectedRows"
       :reload-table="reloadTable"
+      :search-table="search"
+      :selected-rows="selectedRows"
+      :table-url="tableUrl"
       v-bind="iHeaderActions"
     />
     <IBox class="table-content">
       <AutoDataTable
         ref="dataTable"
-        :filter-table="filter"
         :config="iTableConfig"
-        @selection-change="handleSelectionChange"
+        :filter-table="filter"
         v-on="$listeners"
+        @selection-change="handleSelectionChange"
       />
     </IBox>
   </div>
@@ -194,32 +194,32 @@ export default {
 .table-content {
   margin-top: 10px;
 
-  & >>> .el-card__body {
+  & > > > .el-card__body {
     padding: 0;
   }
 
-  & >>> .el-table__header thead > tr > th {
+  & > > > .el-table__header thead > tr > th {
     background-color: white;
   }
 
-  & >>> .el-table__row .cell {
+  & > > > .el-table__row .cell {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  & >>> .el-table__expanded-cell pre {
+  & > > > .el-table__expanded-cell pre {
     max-height: 500px;
     overflow-y: scroll;
   }
 
-  & >>> .el-button-ungroup .el-dropdown > .more-action {
+  & > > > .el-button-ungroup .el-dropdown > .more-action {
     height: 24.6px;
   }
 }
 
 //修改颜色
- .el-button--text{
-   color: #409EFF;
- }
+.el-button--text {
+  color: #409EFF;
+}
 </style>