@lx-frontend/wrap-element-ui 1.0.0-beta.7 → 1.0.1-beta.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@lx-frontend/wrap-element-ui",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.1-beta.1",
   "description": "wrap-element-ui",
   "author": "",
-  "main": "src/components/index.ts",
+  "main": "dist/index.mjs",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",
@@ -18,6 +18,7 @@
     "lint": "eslint src"
   },
   "files": [
+    "dist",
     "README.md",
     "package.json",
     "src/components"

package/src/components/AddMembers/index.vue

@@ -4,37 +4,40 @@
       :title="title"
       :with-submit-btn="false"
       :width="360"
-      @on-change="handleCloseTechniciansSelectPopup"
+      @on-change="handleCloseSelectPopup"
     >
       <div
         slot="form"
-        class="team-setting__technicians-popover"
+        class="team-setting__members-popover"
       >
-        <div class="team-setting__technicians-select">
+        <div class="team-setting__members-select">
           <el-input
-            v-model="techniciansSearchQuery"
+            v-model="searchQuery"
             placeholder="请输入姓名"
-            @input="handleInputTechniciansSearch"
+            @input="handleInputSearch(searchQuery, $attrs.keyId)"
           />
         </div>
         <div
-          v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
-          class="team-setting__empty-technicians-options"
+          v-if="searchQuery && !options.length && !fetchLoading"
+          class="team-setting__empty-members-options"
         >
           {{ $attrs.empty || '系统未登记该员工，请先添加员工账号' }}
         </div>
         <ul
           v-else
-          class="team-setting__technicians-options"
+          class="team-setting__members-options"
         >
           <li
-            class="team-setting__technicians-option"
-            v-for="item in technicianOptions"
+            class="team-setting__members-option"
+            v-for="item in options"
             :key="item[$attrs.showConfig.id]"
           >
-            <div class="team-setting__technicians-option-left">
+            <div class="team-setting__members-option-left" v-if="isShowRoles">
               {{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}
             </div>
+            <div class="team-setting__members-option-left" v-else>
+              {{item[$attrs.showConfig.name]}}
+            </div>
             <el-button
               v-if="item.is_selected"
               type="text"
@@ -45,7 +48,7 @@
             <el-button
               v-else
               type="text"
-              @click="handleAddTechnician($attrs.keyId, item)"
+              @click="handleAdd($attrs.keyId, item)"
             >
               添加
             </el-button>
@@ -80,26 +83,31 @@ export default {
       type: String,
       default: '添加成员',
     },
+    /** 角色名称展示 */
+    isShowRoles: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
-      techniciansSearchQuery: '',
+      searchQuery: '',
     }
   },
   watch: {
   },
   methods: {
-    handleCloseTechniciansSelectPopup(show) {
+    handleCloseSelectPopup(show) {
       if (show) return;
-      this.techniciansSearchQuery = '';
-      this.$emit('update:technicianOptions', []);
+      this.searchQuery = '';
+      this.$emit('update:options', []);
     },
-    handleInputTechniciansSearch(query) {
-      this.$emit('fetchTechniciansMethods', query);
+    handleInputSearch(query, keyId) {
+      this.$emit('fetchMethods', { query, keyId });
     },
-    handleAddTechnician(id, item) {
+    handleAdd(id, item) {
       const query = { id, item };
-      this.$emit('handleAddTechnician', query);
+      this.$emit('handleAdd', query);
     },
   },
 };
@@ -107,25 +115,25 @@ export default {
 
 <style lang="less">
 .team-setting {
-  &__technicians-popover {
-    padding: 20px;
+  &__members-popover {
+    padding: 20px 0;
+    margin: 0 20px;
     height: 350px;
     overflow-y: auto;
   }
-  &__technicians-select {
-    width: 320px;
-  }
-  &__empty-technicians-options {
-    font-size: 12px;
-    color: #80838e;
-    text-align: center;
-    margin-top: 10px;
+  &__empty-members {
+    &-options {
+      font-size: 12px;
+      color: #80838e;
+      text-align: center;
+      margin-top: 10px;
+    }
   }
-  &__technicians-options {
+  &__members-options {
     display: flex;
     flex-direction: column;
   }
-  &__technicians-option {
+  &__members-option {
     display: flex;
     justify-content: space-between;
     align-items: center;

package/src/components/EditableTable/index.less

@@ -180,31 +180,6 @@
       border-right: 2px #e4e8ef solid;
     }
   }
-
-  .el-table-filter,
-  th.el-table__cell .el-table__column-filter-trigger,
-  th.is-sortable .caret-wrapper {
-    display: none;
-  }
-
-  .el-table__body tr.current-row > td,
-  .el-table__body tr.hover-row > td {
-    background-color: #fafafa;
-  }
-
-  table tbody tr td {
-    & .el-date-editor.el-input {
-      width: 100%;
-    }
-
-    & .cell {
-      font-size: 14px;
-    }
-  }
-
-  .el-table__fixed-body-wrapper {
-    background: #fff;
-  }
 }
 
 .view-setting {
@@ -232,7 +207,7 @@
     padding: 0px;
 
     .el-dialog__body {
-      max-height: 70vh;
+      max-height: 800px;
     }
 
     .el-dialog__body {
@@ -522,12 +497,6 @@
     background-color: @--theme-blue--;
     border-color: @--theme-blue--;
   }
-
-  .el-checkbox__input.is-checked .el-checkbox__inner,
-  .el-radio__input.is-checked .el-radio__inner {
-    background: #2468f2;
-    border-color: #2468f2;
-  }
 }
 
 .btn-pointer {
@@ -607,8 +576,6 @@
   margin-top: 12px;
 
   & .el-pagination {
-    padding: 0;
-
     .el-pager li.number {
       background-color: #fff;
       border: 1px solid #d6dbe3;
@@ -638,7 +605,26 @@
   }
 }
 
+.el-table__body tr.current-row > td,
+.el-table__body tr.hover-row > td {
+  background-color: #fafafa;
+}
+
+.el-table-filter,
+th.el-table__cell .el-table__column-filter-trigger,
+th.is-sortable .caret-wrapper {
+  display: none;
+}
 
+table tbody tr td {
+  & .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  & .cell {
+    font-size: 14px;
+  }
+}
 
 .editable-table {
   & table th {
@@ -688,6 +674,12 @@
   }
 }
 
+.el-select-dropdown {
+  &__item {
+    text-align: center;
+  }
+}
+
 .el-dialog__header {
   display: flex;
   justify-content: space-between;

package/src/components/EditableTable/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="editable-table">
     <div class="view-setting">
-      <div
-        v-if="!hideViewSettingBtn"
-        class="view-setting__btn-wrapper"
-      >
+      <div class="view-setting__btn-wrapper">
         <div
           class="view-setting__btn btn-pointer"
           @click="handleViewSettingShow"
@@ -20,7 +17,6 @@
         title="显示设置"
         :visible.sync="viewSettingVisible"
         width="750px"
-        top="12vh"
         :close-on-click-modal="false"
         :append-to-body="true"
         custom-class="view-setting__dialog"
@@ -55,9 +51,8 @@
             <div class="view-setting__content-right-frize">
               冻结前
               <el-input
+                v-model="leftFixedColumnCount"
                 class="view-setting__content-right-input"
-                :value="tempLeftFixedColumnCount"
-                @input="handleInputTempLeftFixedColumnCount"
               />
               列
             </div>
@@ -223,7 +218,7 @@
         :key="column.prop + index"
         resizable
         class-name="editable-table__data-column"
-        :filtered-value="Array.isArray(filteredValue[column.prop]) ? filteredValue[column.prop] : []"
+        :filtered-value="filteredValue[column.prop] || []"
         v-bind="getColumnBindProps(column)"
       >
         <template
@@ -272,7 +267,7 @@
                 </div>
               </div>
               <div
-                v-if="column.search && !Array.isArray(column.search)"
+                v-if="column.isColumnSearchAble"
                 class="sort-filter__search"
               >
                 <div class="sort-filter__search-title">
@@ -284,41 +279,19 @@
                   placeholder="请输入内容"
                 />
               </div>
-
               <div
-                v-if="column.search && Array.isArray(column.search)"
-                class="sort-filter__search"
-                style="display: flex;flex-direction: column;gap: 12px;"
-              >
-                <div
-                  v-for="item in column.search"
-                  :key="item.prop"
-                >
-                  <div class="sort-filter__search-title">
-                    {{ item.label }}
-                  </div>
-                  <el-input
-                    v-model="tempSearchValue[item.prop]"
-                    class="sort-filter__search-input"
-                    placeholder="请输入内容"
-                  />
-                </div>
-              </div>
-
-              <div
-                v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
+                v-if="column.filters && column.filters.length > 0"
                 class="sort-filter__filter"
               >
                 <div class="sort-filter__filter-title">
                   筛选
                 </div>
                 <el-checkbox-group
-                  v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
                   v-model="tempFilteredValue[column.prop]"
                   class="sort-filter__filter-checkbox-group"
                 >
                   <el-checkbox
-                    v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
+                    v-for="item in column.filters"
                     :key="item.value"
                     :label="item.value"
                     class="sort-filter__filter-checkbox"
@@ -331,25 +304,6 @@
                     </slot>
                   </el-checkbox>
                 </el-checkbox-group>
-
-                <el-radio-group
-                  v-if="column.filters && !Array.isArray(column.filters) && column.filters.type === 'radio'"
-                  v-model="tempFilteredValue[column.prop]"
-                  style="display: flex;flex-direction: column;gap: 6px;"
-                >
-                  <el-radio
-                    v-for="item in column.filters.options"
-                    :key="item.value"
-                    :label="item.value"
-                  >
-                    <slot
-                      :name="column.prop + '-filter-item'"
-                      v-bind="item"
-                    >
-                      {{ item.text }}
-                    </slot>
-                  </el-radio>
-                </el-radio-group>
               </div>
               <div
                 v-if="column.summary"
@@ -385,7 +339,7 @@
                 <el-button
                   class="sort-filter__confirm-btn"
                   type="primary"
-                  @click="handleHeaderOperationConfirm(column, scope)"
+                  @click="handleHeaderOperationConfirm(scope)"
                 >
                   确定
                 </el-button>
@@ -584,7 +538,7 @@
         :page-sizes="[10, 15, 30, 60, 100]"
         :page-size.sync="pageSize"
         :pager-count="11"
-        :current-page="currentPage"
+        :current-page.sync="currentPage"
         :total="total"
         @size-change="handlePageSizeChange"
         @current-change="handleCurrPageChange"
@@ -611,7 +565,7 @@ interface IProps {
   dataList: ITableDataItem[];
   /** 列配置 */
   columnConfig: IColumnConfig[];
-  /** 是否展示展开行 */
+  /** 是否展示展开行 */ 
   hasExpandRow?: boolean;
   /** 是否展示序号 */
   hasIndexColumn?: boolean;
@@ -631,16 +585,6 @@ interface IProps {
   dragSemiRange?: number;
   /** 是否显示加载 */
   loading?: boolean;
-  /** 是否隐藏显示设置按钮 */
-  hideViewSettingBtn?: boolean
-  /** 设置的缓存的key */
-  settingStorgeKey?: string
-  /** 前端排序，默认关闭 */
-  localSort?: boolean
-  /** 前端过滤，默认关闭 */
-  localFilter?: boolean
-  /** 页码 */
-  currentPage: number
 }
 
 interface IEmits {
@@ -662,10 +606,6 @@ interface IEmits {
   (e: 'row-edit-cancel', param: { row: any; page: number; size: number;}): void
   /** 页码改变 */
   (e: 'page-change', param: { page: number, size: number }): void
-  /** 查询 */
-  (e: 'search', param: Record<string, any>): void
-  /** 排序 */
-  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -680,12 +620,7 @@ const props = withDefaults(defineProps<IProps>(), {
   colorList: () => [],
   leftFixedCount: 1,
   dragSemiRange: 15,
-  loading: false,
-  hideViewSettingBtn: false,
-  settingStorgeKey: '',
-  localSort: false,
-  localFilter: false,
-  currentPage: 1,
+  loading: false
 })
 
 // 同defineProps一样，不支持泛型参数从外部导入
@@ -705,14 +640,16 @@ const actualColumns = computed(() => {
       isColumnSortable: rawItem.sortable,
       sortable: inSorting.value ? rawItem.sortable : false
     };
-    if (cnt > 0) {
-      item.fixed = 'left';
-      // eslint-disable-next-line no-plusplus
-      cnt--;
-    } else {
-      item.fixed = undefined;
+    if (item) {
+      if (cnt > 0) {
+        item.fixed = 'left';
+        // eslint-disable-next-line no-plusplus
+        cnt--;
+      } else {
+        item.fixed = undefined;
+      }
+      res.push(item);
     }
-    res.push(item);
   }
 
   // 使用默认操作项，添加默认操作列。该列在编辑模式下隐藏
@@ -738,8 +675,9 @@ const beforePageChange = () => {
 }
 const {
   pageSize,
+  currentPage,
   handleCurrPageChange,
-  handlePageSizeChange,
+  handlePageSizeChange
 } = usePagination({
   emit,
   beforePageChange
@@ -779,7 +717,7 @@ const {
   emit,
   tableDomRef,
   pageSize,
-  props,
+  currentPage,
   hasExpandRow: props.hasExpandRow
 })
 
@@ -789,8 +727,6 @@ const {
   columnsToBeShown,
   viewSettingVisible,
   leftFixedColumnCount,
-  tempLeftFixedColumnCount,
-  handleInputTempLeftFixedColumnCount,
   handleViewSettingShow,
   handleViewSettingClose,
   handleViewSettingConfirm
@@ -803,9 +739,6 @@ const {
 
 /************ 列头部操作相关 ************ */
 const {
-  setSort,
-  clearSort,
-  setSearchParams,
   isColumnHeadActive,
   handleSort,
   handleHeaderPopoverShow,
@@ -823,13 +756,11 @@ const {
   sortingColumn,
   isColumnFiltering,
   searchValue,
-  inSorting,
+  inSorting
 } = useColumnHeaderOperation({
   tableDomRef,
   sortFilterPopoverRef,
-  props,
-  emit,
-  showingColumns,
+  props
 })
 
 /************ 表格行拖拽和显示设置列拖拽 ************ */
@@ -856,6 +787,7 @@ useDragSort({
   props,
   viewSettingDragSortOptions,
   beforeDragStart,
+  currentPage,
   pageSize,
   currScope,
   tableDomRef,
@@ -866,10 +798,18 @@ const doTableLayout = async () => {
   tableDomRef.value?.doLayout();
 }
 
+watch(
+  () => props.columnConfig,
+  (val) => {
+    showingColumns.value = val.map(c => c.prop);
+  },
+  { immediate: true }
+)
+
 // 过滤出自定义属性，将其它属性全部透传给 el-table-column
 const getColumnBindProps = (column: IColumnConfig) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { editAble, editType, slotName, inputType, options, filters, ...rest } = column;
+  const { editAble, editType, slotName, inputType, options, ...rest } = column;
   return rest;
 }
 
@@ -892,20 +832,7 @@ const handleColumnClose = (item) => {
 
 defineExpose({
   closeAllExpandedRows,
-  openViewSetting: handleViewSettingShow,
-  elTableRef: tableDomRef,
-  setSort,
-  clearSort,
-  setSearchParams,
-})
-
-// loading 结束和页码变化时滚动到顶部
-watch([
-  () => props.loading,
-  () => props.currentPage,
-], ([loading]) => {
-  if (loading) return;
-  tableDomRef.value.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
+  elTableRef: tableDomRef
 })
 
 </script>

package/src/components/EditableTable/types.ts

@@ -11,40 +11,24 @@ export interface IColumnConfigRequired {
   sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
   slotName?: string; // 如果要自定义，传入 slotName
   isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
-  /** 默认隐藏，显示设置中，该列默认隐藏 */
-  defaultHide?: boolean;
-  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
-  search?: boolean | ISearchOptions
+  isColumnSearchAble?: boolean; // 列是否允许搜索，true则表头弹窗会多一个搜索框
   summary?: boolean; // 是否可以显示该列的统计
   summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
-  /** 过滤，传数组时默认复选框 */
-  filters?: {
-    type?: 'checkbox' | 'radio',
-    options: FiltersOption[]
-    default?: string | number | string[] | number[]
-  } | FiltersOption[]
+  // filters?: {value: string | number; text: string; [key: string]: any}[];
   // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
   [key: string]: any;
 }
 
-type FiltersOption = { value: string | number; text: string; [key: string]: any }
-
-type ISearchOptions = {
-  prop: string,
-  label: string,
-  validator?: (value: string) => boolean
-}[]
-
 type IInputColumn = IColumnConfigRequired & {
   inputType: string | number;
 }
 
 type ISelectColumn = IColumnConfigRequired & {
-  options: { key: string; value: string | number; [key: string]: any }[];
+  options: {key: string; value: string | number; [key: string]: any}[];
 }
 
-type IDateOnlyColumn = IColumnConfigRequired
-type IDateTimeColumn = IColumnConfigRequired
+type IDateOnlyColumn = IColumnConfigRequired & {}
+type IDateTimeColumn = IColumnConfigRequired & {}
 
 export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
 
@@ -95,22 +79,16 @@ export interface IProps {
   leftFixedCount?: number;
   dragSemiRange?: number;
   loading?: boolean;
-  settingStorgeKey?: string
-  localSort?: boolean
-  localFilter?: boolean
-  currentPage: number
 }
 
 export interface IEmits {
   (e: 'selection-change', selection: any): void
-  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
-  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
+  (e: 'row-bg-change', param: {colorId: number; row: ITableDataItem; rowIndex: number}): void
+  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number;}): void
   (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
-  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
-  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
+  (e: 'row-edit', param: { row: any, index: number; page: number; size: number;}): void
+  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number;}): void
   (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
-  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
+  (e: 'row-edit-cancel', param: { row: any; page: number; size: number;}): void
   (e: 'page-change', param: { page: number, size: number }): void
-  (e: 'search', param: Record<string, any>): void
-  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
 }

package/src/components/EditableTable/useColumnHeaderOperation.ts

@@ -1,15 +1,13 @@
-import { computed, ref, watch, nextTick, Ref } from "vue"
-import { IColumnConfig, IEmits, IProps } from './types';
+import { computed, ref, watch, nextTick } from "vue"
+import { IColumnConfig, IProps } from './types';
 
 interface IUseColumnHeaderOperationParams {
   props: IProps
   tableDomRef: any
   sortFilterPopoverRef: any
-  emit: IEmits;
-  showingColumns: Ref<string[]>
 }
 
-export default function useColumnHeaderOperation({ props, tableDomRef, sortFilterPopoverRef, emit, showingColumns }: IUseColumnHeaderOperationParams) {
+export default function useColumnHeaderOperation({props, tableDomRef, sortFilterPopoverRef}: IUseColumnHeaderOperationParams) {
 
   // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
   // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
@@ -24,8 +22,8 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
   const tempSortingColumn = ref<IColumnConfig | null>(null);
 
   // 生效中的过滤配置 和 临时过滤配置
-  const filteredValue = ref<Record<string, string | number | number[] | string[]>>({});
-  const tempFilteredValue = ref<Record<string, string | number | number[] | string[]>>({});
+  const filteredValue = ref<Record<string, string[]>>({});
+  const tempFilteredValue = ref<Record<string, string[]>>({});
 
   // 生效中的统计配置 和 临时统计配置
   const tempSummaryList = ref<string[]>([]);
@@ -35,17 +33,14 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
   const searchValue = ref<Record<string, string>>({});
   const tempSearchValue = ref<Record<string, string>>({});
 
-  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => {
-    if (!Array.isArray(tempFilteredValue.value[k])) return tempFilteredValue.value[k]
-    return tempFilteredValue.value[k]?.length;
-  }));
+  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => tempFilteredValue.value[k]?.length));
 
-  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.search || column.summary;
+  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.isColumnSearchAble || column.summary;
 
   watch(
     () => props.columnConfig,
     (val) => {
-      filteredValue.value = val.reduce((prev, curr) => ({ ...prev, [curr.prop]: [] }), {});
+      filteredValue.value = val.reduce((prev, curr) => ({...prev, [curr.prop]: []}), {});
       tempFilteredValue.value = { ...filteredValue.value };
     },
     { immediate: true }
@@ -68,24 +63,14 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
         sums[index] = summaryMethod(values);
       }
     })
-
+  
     return sums
   }
 
   const isColumnHeadActive = (column: IColumnConfig) => {
-    return (
-      column.filters && (Array.isArray(column.filters)
-        ? (filteredValue.value[column.prop] as any[]).length
-        : column.filters.type === 'radio'
-          ? filteredValue.value[column.prop]
-          : (filteredValue.value[column.prop] as any[]).length)
-      ) ||
-      (
-        column.search
-        ? Array.isArray(column.search) && column.search?.some(v => searchValue.value[v.prop])
-        : searchValue.value[column.prop]
-      ) ||
+    return filteredValue.value[column.prop]?.length ||
       sortingColumn.value?.prop === column.prop ||
+      searchValue.value[column.prop] || 
       summaryList.value.includes(column.prop);
   }
 
@@ -97,7 +82,7 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
     tempSortType.value = sortType.value;
     tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
     // 临时合计项设置成实际的合计项
-    tempSummaryList.value = [...summaryList.value];
+    tempSummaryList.value = [ ...summaryList.value ];
   }
 
   const closeSortAndFilterPopover = (exceptProp?: string) => {
@@ -113,81 +98,21 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
     tempSortingColumn.value = column;
   }
 
-  const columnMap = computed(() => {
-    const obj: Record<string, IColumnConfig> = {}
-    props.columnConfig.forEach(column => {
-      obj[column.prop] = column
-    })
-    return obj
-  })
-
-  const emitSearch = () => {
-    const params: Record<string, any> = {};
-    // 仅提交显示的列的相关数据
-    showingColumns.value.forEach(prop => {
-      const column = columnMap.value[prop]
-      if (column.filters) {
-        params[prop] = filteredValue.value[prop]
-      }
-      if (column.search) {
-        if (Array.isArray(column.search)) {
-          column.search.forEach(v => {
-            params[v.prop] = searchValue.value[v.prop]
-          })
-        } else {
-          params[prop] = searchValue.value[prop]
-        }
-      }
-    })
-
-    Object.keys(params).forEach(key => {
-      if (params[key] === undefined) delete params[key]
-    })
-
-    emit('search', params);
-  };
-
-  const handleHeaderOperationConfirm = async (column: IColumnConfig, scope) => {
-    if (column.search) {
-      // 校验
-      if (Array.isArray(column.search)) {
-        let validate = true;
-        column.search.forEach(v => {
-          if (!tempSearchValue.value[v.prop]) tempSearchValue.value[v.prop] = ''
-          if (!validate) return
-          if (v.validator) {
-            const result = v.validator(tempSearchValue.value[v.prop]);
-            if (validate && !result) validate = false;
-          }
-        })
-        // 校验未通过
-        if (!validate) return
-      } else {
-        if (!tempSearchValue.value[column.prop]) tempSearchValue.value[column.prop] = ''
-      }
-    }
-
-    summaryList.value = [...tempSummaryList.value];
-    sortingColumn.value = tempSortingColumn.value ? { ...tempSortingColumn.value } : null;
+  const handleHeaderOperationConfirm = async (scope) => {
+    summaryList.value = [ ...tempSummaryList.value ];
+    sortingColumn.value = tempSortingColumn.value ? {...tempSortingColumn.value} : null;
     sortType.value = tempSortType.value;
-
-    if (sortingColumn.value) { // 确认时提交排序
-      if (props.localSort) {
-        // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
-        inSorting.value = true;
-        await nextTick();
-        tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
-        inSorting.value = false
-      } else {
-        emit('sort-change', { order: sortType.value, prop: sortingColumn.value.prop });
-      }
+    if (sortingColumn.value) {
+      // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
+      inSorting.value = true;
+      await nextTick();
+      tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
+      inSorting.value = false
     }
 
     filteredValue.value = { ...tempFilteredValue.value };
     searchValue.value = { ...tempSearchValue.value };
 
-    emitSearch();
-
     filterColumns(scope.store);
 
     closeSortAndFilterPopover();
@@ -195,52 +120,18 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
     tableDomRef.value?.doLayout();
   }
 
-  const clearSort = () => {
-    sortingColumn.value = null;
-    sortType.value = null;
-    if (props.localSort) { // 前端过滤
-      tableDomRef.value?.clearSort();
-    } else { // 接口过滤
-      emit('sort-change', { order: null, prop: '' });
-    }
-  }
-
-  const setSort = (params: { order: 'ascending' | 'descending', prop: string }) => {
-    const column = props.columnConfig.find(c => c.prop === params.prop);
-    if (column) {
-      sortingColumn.value = column;
-      sortType.value = params.order;
-      if (props.localSort) {
-        tableDomRef.value?.sort(params.prop, params.order);
-      }
-    }
-  }
-
-  const handleHeaderOperationReset = async (column: IColumnConfig, scope) => {
+  const handleHeaderOperationReset = async (column, scope) => {
     if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
-      clearSort();
+      tableDomRef.value?.clearSort();
+      sortingColumn.value = null;
+      sortType.value = null;
     }
 
     // 合计
     summaryList.value = summaryList.value.filter(item => item !== column.prop);
 
-    if (column.filters) {
-      filteredValue.value[column.prop] = Array.isArray(column.filters)
-        ? []
-        : column.filters.default ?? []
-    }
-    if (column.search) {
-      if (!Array.isArray(column.search)) {
-        searchValue.value[column.prop] = '';
-      } else {
-        column.search.forEach(v => {
-          searchValue.value[v.prop] = '';
-        })
-      }
-    }
-
-    emitSearch();
-
+    filteredValue.value[column.prop] = [];
+    searchValue.value[column.prop] = '';
     filterColumns(scope.store);
 
     closeSortAndFilterPopover();
@@ -249,7 +140,6 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
   }
 
   const filterColumns = (store) => {
-    if (!props.localFilter) return
     store.states.columns.forEach(column => {
       if (filteredValue.value[column.property]) {
         store.commit('filterChange', {
@@ -275,35 +165,7 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
     store.states.data = data;
   }
 
-  const setSearchParams = (params: Record<string, any>) => {
-    const _searchValue = {};
-    const _filteredValue = {};
-
-    // 设置搜索和过滤参数时，如果使用 showingColumns 遍历，会导致通过外部设置未显示的列的搜索和过滤参数丢失
-    props.columnConfig.forEach(column => {
-      if (column.search) {
-        if (Array.isArray(column.search)) {
-          column.search.forEach(v => {
-            _searchValue[v.prop] = params[v.prop];
-          });
-        } else {
-          _searchValue[column.prop] = params[column.prop] ?? '';
-        }
-      }
-      if (column.filters) {
-        const value = params[column.prop] ?? (Array.isArray(column.filters) ? [] : column.filters.default);
-        _filteredValue[column.prop] = value;
-      }
-    })
-
-    searchValue.value = { ...searchValue.value, ..._searchValue }
-    filteredValue.value = { ...filteredValue.value, ..._filteredValue }
-  }
-
   return {
-    setSort,
-    clearSort,
-    setSearchParams,
     isColumnHeadActive,
     handleHeaderPopoverShow,
     handleSort,
@@ -321,6 +183,6 @@ export default function useColumnHeaderOperation({ props, tableDomRef, sortFilte
     sortingColumn,
     isColumnFiltering,
     searchValue,
-    inSorting,
+    inSorting
   }
 }

package/src/components/EditableTable/useDefaultOperation.ts

@@ -1,15 +1,15 @@
 import { Ref, ref } from "vue"
-import { IEmits, IProps } from "./types"
+import { IEmits } from "./types"
 
 interface IParams {
   emit: IEmits;
   pageSize: Ref<number>;
-  props: IProps
+  currentPage: Ref<number>;
   tableDomRef: Ref<any>;
   hasExpandRow: boolean
 }
 
-export default function useDefaultOperation({ emit, pageSize, props, tableDomRef, hasExpandRow }: IParams) {
+export default function useDefaultOperation({emit, pageSize, currentPage, tableDomRef, hasExpandRow}: IParams) {
   const operationPopoverRef = ref<any>(null);
   const editingRowData = ref<Record<string, any>>({});
   const editingRowIndex = ref<number>(-1);
@@ -18,7 +18,7 @@ export default function useDefaultOperation({ emit, pageSize, props, tableDomRef
     emit('row-delete', {
       row,
       index,
-      page: props.currentPage,
+      page: currentPage.value,
       size: pageSize.value
     })
     closeOperationPopover();
@@ -39,9 +39,9 @@ export default function useDefaultOperation({ emit, pageSize, props, tableDomRef
     // 折叠所有展开的行
     closeAllExpandedRows();
     const { row, $index: index } = scope;
-    editingRowData.value = { ...row };
+    editingRowData.value = {...row};
     editingRowIndex.value = index;
-    emit('row-edit', { row, index, page: props.currentPage, size: pageSize.value });
+    emit('row-edit', { row, index, page: currentPage.value, size: pageSize.value});
     closeOperationPopover();
   }
 
@@ -52,9 +52,9 @@ export default function useDefaultOperation({ emit, pageSize, props, tableDomRef
       ...dataList.slice(0, index),
       ...dataList.slice(index + 1)
     ];
-    newList.unshift({ ...row, isPinned: true });
+    newList.unshift({...row, isPinned: true});
     store.states.data = newList;
-    emit('row-pin-to-top', { row, rawIndex: index, page: props.currentPage, size: pageSize.value });
+    emit('row-pin-to-top', { row, rawIndex: index, page: currentPage.value, size: pageSize.value});
     closeOperationPopover();
   }
 
@@ -68,7 +68,7 @@ export default function useDefaultOperation({ emit, pageSize, props, tableDomRef
     }
 
     emit('row-edit-save', {
-      page: props.currentPage,
+      page: currentPage.value,
       size: pageSize.value,
       row,
       changedData
@@ -79,7 +79,7 @@ export default function useDefaultOperation({ emit, pageSize, props, tableDomRef
   const handleEditCancel = (row) => {
     editingRowIndex.value = -1;
     editingRowData.value = {};
-    emit('row-edit-cancel', { row, page: props.currentPage, size: pageSize.value });
+    emit('row-edit-cancel', { row, page: currentPage.value, size: pageSize.value});
   }
 
   return {

package/src/components/EditableTable/useDragSort.ts

@@ -8,10 +8,11 @@ interface IUseDragSortParams {
   viewSettingDragSortOptions: Ref<IColumnConfig[]>
   beforeDragStart: () => boolean
   currScope: Ref<any>
+  currentPage: Ref<number>
   pageSize: Ref<number>
   tableDomRef: Ref<any>
 }
-export default function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
+export default function useDragSort({props, emit, viewSettingDragSortOptions, currentPage, pageSize, beforeDragStart, currScope, tableDomRef }: IUseDragSortParams) {
 
   const draggingData = ref<IDraggingData>({}); // 拖拽相关数据
   const isMouseDown = ref(false);
@@ -20,7 +21,7 @@ export default function useDragSort({ props, emit, viewSettingDragSortOptions, p
   const isOperating = ref(false);
 
   onMounted(() => {
-    tableDomRef.value.$el.addEventListener('mousedown', () => { isOperating.value = true });
+    tableDomRef.value.$el.addEventListener('mousedown', () => {isOperating.value = true});
     document.addEventListener('mousedown', handleDocumentMouseDown);
     document.addEventListener('mousemove', handleDocumentMouseMove);
     document.addEventListener('mouseup', handleDocumentMouseUp);
@@ -200,7 +201,7 @@ export default function useDragSort({ props, emit, viewSettingDragSortOptions, p
       row: movedRow,
       fromIndex: draggingIndex,
       toIndex: dropIndex,
-      page: props.currentPage,
+      page: currentPage.value,
       size: pageSize.value
     });
     // 清理工作
@@ -209,7 +210,7 @@ export default function useDragSort({ props, emit, viewSettingDragSortOptions, p
 
   const handleViewSettingDragMouseDown = (event, index) => {
     const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
-      .reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
+      .reduce((pre, item, index) => ({...pre, [index]: [item]}), {});
     draggingData.value.isDragging = true;
     draggingData.value.rowDoms = rowDoms;
     draggingData.value.draggingIndex = +index;

package/src/components/EditableTable/usePagination.ts

@@ -6,26 +6,29 @@ interface IParams {
   beforePageChange: () => void
 }
 
-export default function usePagination({ emit, beforePageChange }: IParams) {
+export default function usePagination({emit, beforePageChange}: IParams) {
 
   const pageSize = ref(10);
+  const currentPage = ref(1);
 
   const handlePageSizeChange = (size: number) => {
     pageSize.value = size;
+    currentPage.value = 1;
     // searchValue.value = {};
     beforePageChange();
-    emit('page-change', { size, page: 1 });
+    emit('page-change', {size, page: currentPage.value});
   }
 
   const handleCurrPageChange = (curr: number) => {
     // searchValue.value = {};
     beforePageChange();
-    emit('page-change', { size: pageSize.value, page: curr });
+    emit('page-change', {size: pageSize.value, page: curr});
   }
 
   return {
     pageSize,
+    currentPage,
     handlePageSizeChange,
-    handleCurrPageChange,
+    handleCurrPageChange
   }
 }

package/src/components/EditableTable/useRowBgColor.ts

@@ -6,7 +6,7 @@ interface IUseRowBgColorParams {
   emit: IEmits;
 }
 
-export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams) {
+export default function useRowBgColor({colorList, emit}: IUseRowBgColorParams) {
   const colorPopoverRef = ref<any>(null);
 
   const isDefaultColor = (id: number) => {
@@ -31,11 +31,11 @@ export default function useRowBgColor({ colorList, emit }: IUseRowBgColorParams)
   const handleColorChange = async (colorId: number, scope) => {
     const { row, $index: rowIndex, store } = scope;
     const dataList = store.states.data;
-    const curRow = { ...dataList[rowIndex], colorId: +colorId };
+    const curRow = {...dataList[rowIndex], colorId: +colorId};
     const newList = [...dataList];
     newList.splice(rowIndex, 1, curRow);
     store.states.data = newList;
-    emit('row-bg-change', { colorId, row, rowIndex });
+    emit('row-bg-change', {colorId, row, rowIndex});
     await nextTick();
     // TODO: 为什么不是数组？为什么关闭弹窗不生效了？
     colorPopoverRef.value?.doClose();

package/src/components/EditableTable/useViewSetting.ts

@@ -1,4 +1,4 @@
-import { ref, nextTick, watch, ComputedRef, Ref, onMounted, computed } from "vue"
+import { ref, nextTick, watch, ComputedRef, Ref, onMounted } from "vue"
 import { IColumnConfig, IProps } from "./types"
 
 interface IViewSettingParams {
@@ -13,53 +13,12 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const columnsToBeShown = ref<string[]>([]); // 显示设置弹窗中勾选的列
   const viewSettingVisible = ref(false);
   const leftFixedColumnCount = ref(0);
-  const tempLeftFixedColumnCount = ref(0);
-
-  const storageKey = computed(() => `@lx-frontend/wrap-element-ui/table_setting_cloumns/${props.settingStorgeKey || (location.pathname === '/' ? location.hash : location.pathname)}`);
-
-  const saveSettingToStorge = () => localStorage.setItem(storageKey.value, JSON.stringify({
-    showingColumns: showingColumns.value,
-    leftFixedColumnCount: leftFixedColumnCount.value
-  }));
-
-  watch(
-    () => props.columnConfig,
-    (val) => {
-      const _keys = new Set(props.columnConfig.map(c => (c.prop)));
-      const _cache = localStorage.getItem(storageKey.value);
-      const setColumns = () => (showingColumns.value = val.filter(v => !v.defaultHide).map(c => c.prop));
-      if (!_cache) {
-        setColumns();
-        leftFixedColumnCount.value = props.leftFixedCount as number;
-      } else {
-        try {
-          // 缓存数据字段可能随着更新导致对不上，清理无效数据，防止出问题
-          const cache = JSON.parse(_cache);
-          if (!cache.showingColumns || !Array.isArray(cache.showingColumns)) {
-            setColumns();
-          } else {
-            showingColumns.value = cache.showingColumns.filter(key => _keys.has(key));
-          }
-          const _leftFixedColumnCount = Number(cache?.leftFixedColumnCount)
-          leftFixedColumnCount.value = isNaN(_leftFixedColumnCount) ? (props.leftFixedCount as number) : _leftFixedColumnCount;
-          // 写入清理后的数据
-          saveSettingToStorge();
-        } catch (error) {
-          console.error(error);
-          localStorage.removeItem(storageKey.value);
-          setColumns();
-        }
-      }
-    },
-    { immediate: true }
-  )
 
   watch(
     () => columnsToBeShown.value,
     (val) => {
       viewSettingDragSortOptions.value = props.columnConfig
         .filter(c => val.includes(c.prop));
-      if (tempLeftFixedColumnCount.value > val.length) tempLeftFixedColumnCount.value = val.length
     },
     { immediate: true }
   )
@@ -80,7 +39,6 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const handleViewSettingShow = () => {
     viewSettingDragSortOptions.value = actualColumns.value
       .filter(c => columnsToBeShown.value.includes(c.prop));
-    tempLeftFixedColumnCount.value = leftFixedColumnCount.value;
     viewSettingVisible.value = true;
   }
 
@@ -93,25 +51,15 @@ export default function useViewSetting({ tableDomRef, showingColumns, actualColu
   const handleViewSettingConfirm = async () => {
     viewSettingVisible.value = false;
     showingColumns.value = viewSettingDragSortOptions.value.map(c => c.prop);
-    leftFixedColumnCount.value = tempLeftFixedColumnCount.value;
-    saveSettingToStorge()
     await nextTick();
     tableDomRef.value?.doLayout();
   }
 
-  const handleInputTempLeftFixedColumnCount = (value: string) => {
-    const _value = Number(value)
-    if (isNaN(_value)) return
-    tempLeftFixedColumnCount.value = Math.max(0, Math.min(columnsToBeShown.value.length, Math.floor(_value)))
-  }
-
   return {
     viewSettingDragSortOptions,
     columnsToBeShown,
     viewSettingVisible,
     leftFixedColumnCount,
-    tempLeftFixedColumnCount,
-    handleInputTempLeftFixedColumnCount,
     handleViewSettingShow,
     handleViewSettingClose,
     handleViewSettingConfirm