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

package/src/components/EditableTable/index.vue

@@ -1,108 +1,32 @@
 <template>
   <div class="editable-table">
-    <div class="view-setting">
+    <div class="editable-table-view-setting">
       <div
         v-if="!hideViewSettingBtn"
-        class="view-setting__btn-wrapper"
+        class="editable-table-view-setting__btn-wrapper"
       >
         <div
-          class="view-setting__btn btn-pointer"
+          class="editable-table-view-setting__btn btn-pointer"
           @click="handleViewSettingShow"
         >
           <i class="el-icon-setting" />
-          <div class="view-setting__btn-text">
+          <div class="editable-table-view-setting__btn-text">
             显示设置
           </div>
         </div>
       </div>
 
-      <el-dialog
-        title="显示设置"
-        :visible.sync="viewSettingVisible"
-        width="750px"
-        top="12vh"
-        :close-on-click-modal="false"
-        :append-to-body="true"
-        custom-class="view-setting__dialog"
-      >
-        <div class="view-setting__content">
-          <div class="view-setting__content-left">
-            <div class="view-setting__content-left-title">
-              表头设置
-            </div>
-            <div class="view-setting__checkbox-wrapper">
-              <el-checkbox-group v-model="columnsToBeShown">
-                <el-checkbox
-                  v-for="item in columnConfig"
-                  :key="item.label"
-                  :label="item.prop"
-                  :disabled="item.isAlwaysShow"
-                >
-                  <div class="view-setting__content-left-item">
-                    {{ item.label }}
-                  </div>
-                </el-checkbox>
-              </el-checkbox-group>
-            </div>
-          </div>
-          <div class="view-setting__content-right">
-            <div class="view-setting__content-right-title">
-              已选择
-              <div class="view-setting__selected-count">
-                {{ columnsToBeShown.length }}
-              </div>
-            </div>
-            <div class="view-setting__content-right-frize">
-              冻结前
-              <el-input
-                class="view-setting__content-right-input"
-                :value="tempLeftFixedColumnCount"
-                @input="handleInputTempLeftFixedColumnCount"
-              />
-              列
-            </div>
-            <div class="view-setting__content-right-selected">
-              <div
-                v-for="(item, index) in viewSettingDragSortOptions"
-                :key="item.prop"
-                class="view-setting__selected-item view-setting-draggable-item"
-              >
-                <div class="view-setting__selected-item-left">
-                  <div
-                    class="view-setting-drag-target view-setting__icon-wrapper"
-                    :data-index="index"
-                  >
-                    <div
-                      class="view-setting-drag-target editable-table-drag-icon"
-                      :data-index="index"
-                    />
-                  </div>
-                  <div class="view-setting__selected-item-name">
-                    {{ item.label }}
-                  </div>
-                </div>
-                <div
-                  :class="['view-setting__selected-item-close', item.isAlwaysShow ? 'view-setting__selected-item-close--disabled' : '']"
-                  @click="handleColumnClose(item)"
-                >
-                  <i class="el-icon-close" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <template #footer>
-          <el-button @click="handleViewSettingClose">
-            取消
-          </el-button>
-          <el-button
-            type="primary"
-            @click="handleViewSettingConfirm"
-          >
-            确认
-          </el-button>
-        </template>
-      </el-dialog>
+      <biz-view-setting-dialog
+        ref="bizViewSettingDialogRef"
+        :props="props"
+        :actual-columns="actualColumns"
+        :showing-columns="showingColumns"
+        :view-setting-drag-sort-options="viewSettingDragSortOptions"
+        @update:leftFixedColumnCount="(val) => { leftFixedColumnCount = val }"
+        @update:showingColumns="(val) => { showingColumns = val }"
+        @update:viewSettingDragSortOptions="(val) => { viewSettingDragSortOptions = val }"
+        @tableDoLayout="doTableLayout"
+      />
     </div>
 
     <!-- 列表展示，属性透传，列编辑 -->
@@ -125,7 +49,7 @@
         v-if="rowDragAble"
         width="30px"
         class-name="editable-table__drag-cell no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
       >
         <template #default="scope">
           <div
@@ -145,7 +69,7 @@
         v-if="hasExpandRow"
         width="30px"
         type="expand"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       >
         <template #default="scope">
@@ -161,7 +85,7 @@
         width="45px"
         align="center"
         type="selection"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       />
       <!-- 编号列 -->
@@ -169,7 +93,7 @@
         v-if="hasIndexColumn"
         min-width="30px"
         type="index"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
         class-name="no-inner-cell-border"
       />
       <!-- 颜色选择列 -->
@@ -177,44 +101,41 @@
         v-if="colorList && colorList.length > 0"
         width="22px"
         class-name="editable-table__color-column no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+        :filtered-value="Array.isArray(filteredValue[colorFilterConfig?.prop]) ? filteredValue[colorFilterConfig?.prop] : []"
       >
         <template #header>
-          <div class="editable-table__color-icon" />
-        </template>
-        <template #default="scope">
-          <el-popover
-            ref="colorPopoverRef"
-            placement="right"
-            trigger="click"
-            popper-class="color-popover"
+          <biz-table-header-popover
+            v-if="colorFilterConfig"
+            :head-active="isColumnHeadActive(colorFilterConfig)"
+            :column="colorFilterConfig"
+            :showing-columns="showingColumns"
+            :temp-summary-list="tempSummaryList"
+            :temp-sort-prop="tempSortProp"
+            :temp-sort-type="tempSortType"
+            :temp-filtered-value="tempFilteredValue"
+            @update:tempSummaryList="val => { tempSummaryList = val }"
+            @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+            @popover-show="() => handleHeaderPopoverShow(colorFilterConfig)"
+            @update:sort="handleSort"
+            @reset="() => handleHeaderOperationReset(colorFilterConfig)"
+            @confirm="() => handleHeaderOperationConfirm(colorFilterConfig)"
           >
-            <div class="color-list">
-              <div
-                v-for="color in colorList"
-                :key="color.id"
-                class="color-list__item"
-                :style="{ backgroundColor: color.sampleColor }"
-                @click="handleColorChange(color.id, scope)"
-              >
-                <span :style="{color: color.textColor}">{{ color.name }}</span>
-              </div>
-            </div>
-            <template slot="reference">
-              <!-- 没有这个包裹的div标签，在拖动换行之后，无法调起颜色选择弹窗 -->
-              <div>
-                <div
-                  v-if="isDefaultColor(scope.row.colorId)"
-                  class="editable-table__color-icon"
-                />
-                <div
-                  v-else
-                  class="editable-table__selected-color"
-                  :style="{ backgroundColor: getColorById(scope.row.colorId, 'sample') }"
-                />
-              </div>
+            <template #custom>
+              <div class="editable-table__color-icon" />
             </template>
-          </el-popover>
+          </biz-table-header-popover>
+          <div
+            v-else
+            class="editable-table__color-icon"
+          />
+        </template>
+        <template #default="scope">
+          <biz-color-select
+            :color-list="colorList"
+            :scope="scope"
+            @row-bg-change="(params) => emit('row-bg-change', params)"
+          />
         </template>
       </el-table-column>
       <!-- 这里的key很重要，必须保证每次生成的key都不一样，这样列排序功能才能生效，否则，即使actualColumns数组元素顺序发生变化，列顺序也不会改变。原因未知 -->
@@ -227,232 +148,66 @@
         v-bind="getColumnBindProps(column)"
       >
         <template
+          #header
           v-if="showColumnHeadSortIcon(column)"
-          #header="scope"
         >
-          <el-popover
-            ref="sortFilterPopoverRef"
-            placement="bottom"
-            trigger="click"
-            popper-class="editable-table__sort-filter"
-            :data-prop="column.prop"
-            @show="handleHeaderPopoverShow(column)"
+          <biz-table-header-popover
+            :head-active="isColumnHeadActive(column)"
+            :column="column"
+            :showing-columns="showingColumns"
+            :temp-summary-list="tempSummaryList"
+            :temp-sort-prop="tempSortProp"
+            :temp-sort-type="tempSortType"
+            :temp-filtered-value="tempFilteredValue"
+            @update:tempSummaryList="val => { tempSummaryList = val }"
+            @update:tempFilteredValue="(key, value) => { $set(tempFilteredValue, key, value) }"
+            @popover-show="() => handleHeaderPopoverShow(column)"
+            @update:sort="handleSort"
+            @reset="() => handleHeaderOperationReset(column)"
+            @confirm="() => handleHeaderOperationConfirm(column)"
           >
-            <template slot="reference">
-              <!-- 筛选中，或排序中，高亮 -->
-              <span :class="['editable-table__sort-reference', isColumnHeadActive(column) && 'editable-table__sort-reference--active']">
+            <template #summay-item>
+              <slot
+                :name="column.prop + '-summay-item'"
+                v-bind="column"
+              >
                 {{ column.label }}
-                <div :class="['editable-table__sort-icon', isColumnHeadActive(column) && 'editable-table__sort-icon--active']" />
-              </span>
+              </slot>
             </template>
-            <div class="sort-filter">
-              <div class="sort-filter__column-title">
-                {{ column.label }}
-              </div>
-              <div
-                v-if="column.isColumnSortable"
-                class="sort-filter__sort"
-              >
-                <div class="sort-filter__sort-title">
-                  排序
-                </div>
-                <div class="sort-filter__sort-btns">
-                  <el-button
-                    :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
-                    @click="handleSort('ascending', column)"
-                  >
-                    升序
-                  </el-button>
-                  <el-button
-                    :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
-                    @click="handleSort('descending', column)"
-                  >
-                    降序
-                  </el-button>
-                </div>
-              </div>
-              <div
-                v-if="column.search && !Array.isArray(column.search)"
-                class="sort-filter__search"
-              >
-                <div class="sort-filter__search-title">
-                  搜索
-                </div>
-                <el-input
-                  v-model="tempSearchValue[column.prop]"
-                  class="sort-filter__search-input"
-                  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)"
-                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)"
-                    :key="item.value"
-                    :label="item.value"
-                    class="sort-filter__filter-checkbox"
-                  >
-                    <slot
-                      :name="column.prop + '-filter-item'"
-                      v-bind="item"
-                    >
-                      {{ item.text }}
-                    </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"
-                class="sort-filter__filter"
-              >
-                <div class="sort-filter__filter-title">
-                  统计
-                </div>
-                <el-checkbox-group
-                  v-model="tempSummaryList"
-                  class="sort-filter__filter-checkbox-group"
-                >
-                  <el-checkbox
-                    :label="column.prop"
-                    class="sort-filter__filter-checkbox"
-                  >
-                    <slot
-                      :name="column.prop + '-summay-item'"
-                      v-bind="column"
-                    >
-                      {{ column.label }}
-                    </slot>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
-              <div class="sort-filter__footer">
-                <el-button
-                  class="sort-filter__reset-btn"
-                  @click="handleHeaderOperationReset(column, scope)"
-                >
-                  重置
-                </el-button>
-                <el-button
-                  class="sort-filter__confirm-btn"
-                  type="primary"
-                  @click="handleHeaderOperationConfirm(column, scope)"
-                >
-                  确定
-                </el-button>
-              </div>
-            </div>
-          </el-popover>
+          </biz-table-header-popover>
         </template>
         <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
         <template
           v-if="column.prop === '$$operation'"
           #default="scope"
         >
-          <el-popover
+          <biz-table-operate-popover
             v-if="editingRowIndex !== scope.$index"
             ref="operationPopoverRef"
-            placement="bottom"
-            trigger="click"
-            popper-class="operation-popover"
+            :default-operations="defaultOperations"
+            :scope="scope"
+            @edit="() => handleEdit(scope)"
+            @delete="() => handleDelete(scope.row, scope.$index)"
+            @rowPinToTop="() => handleRowPinToTop(scope)"
           >
-            <div
-              slot="reference"
-              class="operation-popover__operation-reference btn-pointer"
-            >
-              <el-button :class="['operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'operation-popover__operation-btn--active']">
-                操作
-              </el-button>
-            </div>
-            <div class="operation-popover__operation">
-              <div
-                v-if="defaultOperations.includes('delete')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleDelete(scope.row, scope.$index)"
-              >
-                删除
-              </div>
-              <div
-                v-if="defaultOperations.includes('edit')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleEdit(scope)"
-              >
-                编辑
-              </div>
-              <div
-                v-if="defaultOperations.includes('top')"
-                class="operation-popover__operation-item btn-pointer"
-                @click="handleRowPinToTop(scope)"
-              >
-                置顶
-              </div>
-              <slot
-                name="custom-operation"
-                v-bind="scope"
-              />
-            </div>
-          </el-popover>
+            <slot
+              name="custom-operation"
+              v-bind="scope"
+            />
+          </biz-table-operate-popover>
+
           <div
             v-else
-            class="operation-popover__save-cancel"
+            class="editable-table-operation-popover__save-cancel"
           >
             <div
-              class="btn-pointer operation-popover__btn"
+              class="btn-pointer editable-table-operation-popover__btn"
               @click="handleEditSave(scope.row)"
             >
               保存
             </div>
             <div
-              class="btn-pointer operation-popover__btn"
+              class="btn-pointer editable-table-operation-popover__btn"
               @click="handleEditCancel(scope.row)"
             >
               取消
@@ -480,30 +235,11 @@
               :name="column.editSlotName"
             />
             <!-- 内置编辑类型 -->
-            <div v-else-if="column.editType">
-              <div v-if="column.editType === 'input'">
-                <el-input
-                  v-model="editingRowData[column.prop]"
-                  clearable
-                />
-              </div>
-              <div v-if="column.editType === 'select'">
-                <el-select v-model="editingRowData[column.prop]">
-                  <el-option
-                    v-for="item in column.selectOptions"
-                    :key="item.label"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </div>
-              <el-date-picker
-                v-if="column.editType === 'date'"
-                v-model="editingRowData[column.prop]"
-                type="date"
-                placeholder="选择日期"
-              />
-            </div>
+            <biz-edit-cell
+              v-else-if="column.editType"
+              v-model="editingRowData[column.prop]"
+              :column="column"
+            />
             <!-- 不支持编辑 -->
             <slot
               v-else
@@ -518,32 +254,11 @@
           #default="scope"
         >
           <!-- 当前行编辑中，内置编辑类型 -->
-          <template v-if="editingRowIndex === scope.$index && column.editType">
-            <div v-if="column.editType === 'input'">
-              <el-input
-                v-model="editingRowData[column.prop]"
-                clearable
-                type="text"
-              />
-            </div>
-            <div v-if="column.editType === 'select'">
-              <el-select v-model="editingRowData[column.prop]">
-                <el-option
-                  v-for="item in column.selectOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-            <div v-if="column.editType === 'date'">
-              <el-date-picker
-                v-model="editingRowData[column.prop]"
-                type="date"
-                placeholder="选择日期"
-              />
-            </div>
-          </template>
+          <biz-edit-cell
+            v-if="editingRowIndex === scope.$index && column.editType"
+            v-model="editingRowData[column.prop]"
+            :column="column"
+          />
           <!-- 当前行编辑中，自定义编辑类型 -->
           <slot
             v-else-if="column.editSlotName && scope.$index === editingRowIndex"
@@ -581,7 +296,7 @@
       <el-pagination
         background
         layout="sizes, prev, pager, next, jumper"
-        :page-sizes="[10, 15, 30, 60, 100]"
+        :page-sizes="pageSizes"
         :page-size.sync="pageSize"
         :pager-count="11"
         :current-page="currentPage"
@@ -594,15 +309,25 @@
 </template>
 
 <script lang="ts" setup>
+import BizColorSelect from './features/bizColorSelect.vue';
+import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
+import BizTableHeaderPopover from './features/bizTableHeaderPopover/index.vue'
+import BizEditCell from './features/bizEditCell.vue'
+import BizTableOperatePopover from './features/bizTableOperatePopover.vue'
+
 import { computed, nextTick, ref, watch } from 'vue';
-import { Message } from 'element-ui'
-import usePagination from './usePagination';
-import useCellHover from './useCellHover';
-import useViewSetting from './useViewSetting';
-import useRowBgColor from './useRowBgColor';
-import useDefaultOperation from './useDefaultOperation'
-import useColumnHeaderOperation from './useColumnHeaderOperation';
-import useDragSort from './useDragSort';
+import { Message } from 'element-ui';
+import omit from 'lodash/omit';
+
+import {
+  usePagination,
+  useCellHover,
+  useRowBgColor,
+  useDefaultOperation,
+  useColumnHeaderOperation,
+  useDragSort,
+} from './bizHooks'
+
 import { ITableDataItem, IColumnConfig, IDefaultOperationType, IColorList } from './types';
 
 // defineProps泛型参数如果从外部传入，编译报错
@@ -625,6 +350,8 @@ interface IProps {
   defaultOperations?: IDefaultOperationType[];
   /** 行背景色列表 */
   colorList?: IColorList;
+  /** 自定义颜色列的表头筛选 */
+  colorFilterConfig?: IColumnConfig;
   /** 左侧固定列数 */
   leftFixedCount?: number;
   /** 性能优化参数，调整拖拽的范围 */
@@ -641,6 +368,7 @@ interface IProps {
   localFilter?: boolean
   /** 页码 */
   currentPage: number
+  pageSizes?: number[]
 }
 
 interface IEmits {
@@ -678,6 +406,7 @@ const props = withDefaults(defineProps<IProps>(), {
   total: 0,
   defaultOperations: () => [],
   colorList: () => [],
+  colorFilterConfig: undefined,
   leftFixedCount: 1,
   dragSemiRange: 15,
   loading: false,
@@ -686,24 +415,28 @@ const props = withDefaults(defineProps<IProps>(), {
   localSort: false,
   localFilter: false,
   currentPage: 1,
-})
+  pageSizes: () => [10, 15, 30, 60, 100],
+});
 
 // 同defineProps一样，不支持泛型参数从外部导入
-const emit = defineEmits<IEmits>()
+const emit = defineEmits<IEmits>();
 
 const showingColumns = ref<string[]>([]); // 表格中实际展示的列
+const leftFixedColumnCount = ref(0) // 左侧固定列数量
+const viewSettingDragSortOptions = ref<IColumnConfig[]>([])
 
 const actualColumns = computed(() => {
   const res: IColumnConfig[] = [];
-  let cnt = leftFixedColumnCount.value
+  let cnt = leftFixedColumnCount.value;
 
   // 列排序和列过滤
   for (const prop of showingColumns.value) {
     const rawItem = props.columnConfig.find(c => c.prop === prop) ?? {} as IColumnConfig;
     const item: IColumnConfig = {
       ...rawItem,
-      isColumnSortable: rawItem.sortable,
-      sortable: inSorting.value ? rawItem.sortable : false
+      isColumnSortable: !!rawItem.sortable,
+      sortable: inSorting.value ? !!rawItem.sortable : false,
+      _sortable: rawItem.sortable,
     };
     if (cnt > 0) {
       item.fixed = 'left';
@@ -720,22 +453,21 @@ const actualColumns = computed(() => {
     res.push({
       label: '操作',
       prop: '$$operation',
-      'min-width': '100px',
+      minWidth: '100px',
       fixed: 'right'
     });
   }
 
   return res;
-})
+});
 
-const sortFilterPopoverRef = ref<any>(null);
 const tableDomRef = ref<any>(null);
 const currScope = ref<any>(null);
 
 /************ 分页相关 *************/
 const beforePageChange = () => {
-  searchValue.value = {};
-}
+  // searchValue.value = {};
+};
 const {
   pageSize,
   handleCurrPageChange,
@@ -743,26 +475,22 @@ const {
 } = usePagination({
   emit,
   beforePageChange
-})
+});
 
 /************ 表格单元格hover事件相关 ************ */
 const {
   hoveringCellInfo,
   setCellClassName,
   debouncedHoverHandler
-} = useCellHover(tableDomRef)
+} = useCellHover(tableDomRef);
 
 /************ 行背景色设置相关 ************ */
 const {
-  isDefaultColor,
-  getColorById,
   setRowStyle,
-  handleColorChange,
-  colorPopoverRef
 } = useRowBgColor({
-  colorList: props.colorList,
+  colorList: props.colorList || [],
   emit
-})
+});
 
 /************ 默认的操作相关 ************ */
 const {
@@ -781,25 +509,7 @@ const {
   pageSize,
   props,
   hasExpandRow: props.hasExpandRow
-})
-
-/************ 显示设置相关 ************ */
-const {
-  viewSettingDragSortOptions,
-  columnsToBeShown,
-  viewSettingVisible,
-  leftFixedColumnCount,
-  tempLeftFixedColumnCount,
-  handleInputTempLeftFixedColumnCount,
-  handleViewSettingShow,
-  handleViewSettingClose,
-  handleViewSettingConfirm
-} = useViewSetting({
-  tableDomRef,
-  showingColumns,
-  actualColumns,
-  props
-})
+});
 
 /************ 列头部操作相关 ************ */
 const {
@@ -815,27 +525,24 @@ const {
   tableSummaryMethod,
   filteredValue,
   showColumnHeadSortIcon,
-  tempSortingColumn,
-  tempSearchValue,
+  sortProp,
   tempFilteredValue,
   tempSummaryList,
   tempSortType,
-  sortingColumn,
+  tempSortProp,
   isColumnFiltering,
-  searchValue,
   inSorting,
 } = useColumnHeaderOperation({
   tableDomRef,
-  sortFilterPopoverRef,
   props,
   emit,
   showingColumns,
-})
+});
 
 /************ 表格行拖拽和显示设置列拖拽 ************ */
 const beforeDragStart = () => {
   // 如果有列存在排序，不允许拖拽
-  if (sortingColumn.value) {
+  if (sortProp.value) {
     Message.warning('已有列正在排序，不允许拖拽。');
     return false;
   }
@@ -848,8 +555,8 @@ const beforeDragStart = () => {
 
   editingRowIndex.value = -1; // 关闭编辑状态
 
-  return true
-}
+  return true;
+};
 
 useDragSort({
   emit,
@@ -859,36 +566,39 @@ useDragSort({
   pageSize,
   currScope,
   tableDomRef,
-})
+});
 
 const doTableLayout = async () => {
   await nextTick();
   tableDomRef.value?.doLayout();
-}
+};
 
 // 过滤出自定义属性，将其它属性全部透传给 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;
-  return rest;
-}
+  // 过滤掉自定义属性，只保留 el-table-column 支持的属性
+  return omit(column, [
+    'editType',
+    'slotName',
+    'inputType',
+    'options',
+    'filters'
+  ]);
+};
 
 const setRowClassName = (scope) => {
   return `
-    custom-row-classname 
-    custom-row-classname-${scope.rowIndex} 
+    custom-row-classname
+    custom-row-classname-${scope.rowIndex}
     ${scope.row.isPinned ? 'custom-row-classname-pinned' : ''}
-  `
-}
+  `;
+};
 
 const handleSelectionChange = (e) => {
   emit('selection-change', e);
-}
+};
 
-const handleColumnClose = (item) => {
-  if (item.isAlwaysShow) return;
-  columnsToBeShown.value = columnsToBeShown.value.filter(c => c !== item.prop);
-}
+const bizViewSettingDialogRef = ref(null as unknown as InstanceType<typeof BizViewSettingDialog>)
+const handleViewSettingShow = () => bizViewSettingDialogRef.value.open()
 
 defineExpose({
   closeAllExpandedRows,
@@ -897,19 +607,20 @@ defineExpose({
   setSort,
   clearSort,
   setSearchParams,
-})
+});
 
 // loading 结束和页码变化时滚动到顶部
 watch([
   () => props.loading,
   () => props.currentPage,
+  () => pageSize,
 ], ([loading]) => {
   if (loading) return;
-  tableDomRef.value.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
-})
+  tableDomRef.value.$el.querySelector('.el-table__body-wrapper').scrollTop = 0;
+});
 
 </script>
 
 <style lang="less">
 @import './index.less';
-</style>
+</style>