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

package/src/components/EditableTable/index.vue

@@ -1,915 +1,631 @@
-<template>
-  <div class="editable-table">
-    <div class="view-setting">
-      <div
-        v-if="!hideViewSettingBtn"
-        class="view-setting__btn-wrapper"
-      >
-        <div
-          class="view-setting__btn btn-pointer"
-          @click="handleViewSettingShow"
-        >
-          <i class="el-icon-setting" />
-          <div class="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>
-    </div>
-
-    <!-- 列表展示，属性透传，列编辑 -->
-    <el-table
-      ref="tableDomRef"
-      v-loading="loading"
-      :data="dataList"
-      :row-style="setRowStyle"
-      :row-class-name="setRowClassName"
-      :cell-class-name="setCellClassName"
-      :show-summary="summaryList.length > 0"
-      :summary-method="tableSummaryMethod"
-      v-bind="$attrs"
-      border
-      @selection-change="handleSelectionChange"
-      @cell-mouse-enter="debouncedHoverHandler"
-      @header-dragend="doTableLayout"
-    >
-      <el-table-column
-        v-if="rowDragAble"
-        width="30px"
-        class-name="editable-table__drag-cell no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
-      >
-        <template #default="scope">
-          <div
-            class="row-drag-target editable-table__drag-icon"
-            :data-index="scope.$index"
-            @mousedown="currScope = scope"
-          >
-            <div
-              :data-index="scope.$index"
-              class="row-drag-target editable-table-drag-icon"
-            />
-          </div>
-        </template>
-      </el-table-column>
-      <!-- 展开行 -->
-      <el-table-column
-        v-if="hasExpandRow"
-        width="30px"
-        type="expand"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
-        class-name="no-inner-cell-border"
-      >
-        <template #default="scope">
-          <slot
-            name="expand"
-            v-bind="scope"
-          />
-        </template>
-      </el-table-column>
-      <!-- 选择列 -->
-      <el-table-column
-        v-if="hasSelectionColumn"
-        width="45px"
-        align="center"
-        type="selection"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
-        class-name="no-inner-cell-border"
-      />
-      <!-- 编号列 -->
-      <el-table-column
-        v-if="hasIndexColumn"
-        min-width="30px"
-        type="index"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
-        class-name="no-inner-cell-border"
-      />
-      <!-- 颜色选择列 -->
-      <el-table-column
-        v-if="colorList && colorList.length > 0"
-        width="22px"
-        class-name="editable-table__color-column no-inner-cell-border"
-        :fixed="leftFixedColumnCount > 0 ? 'left' : ''"
-      >
-        <template #header>
-          <div class="editable-table__color-icon" />
-        </template>
-        <template #default="scope">
-          <el-popover
-            ref="colorPopoverRef"
-            placement="right"
-            trigger="click"
-            popper-class="color-popover"
-          >
-            <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>
-          </el-popover>
-        </template>
-      </el-table-column>
-      <!-- 这里的key很重要，必须保证每次生成的key都不一样，这样列排序功能才能生效，否则，即使actualColumns数组元素顺序发生变化，列顺序也不会改变。原因未知 -->
-      <el-table-column
-        v-for="(column, index) in actualColumns"
-        :key="column.prop + index"
-        resizable
-        class-name="editable-table__data-column"
-        :filtered-value="Array.isArray(filteredValue[column.prop]) ? filteredValue[column.prop] : []"
-        v-bind="getColumnBindProps(column)"
-      >
-        <template
-          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)"
-          >
-            <template slot="reference">
-              <!-- 筛选中，或排序中，高亮 -->
-              <span :class="['editable-table__sort-reference', isColumnHeadActive(column) && 'editable-table__sort-reference--active']">
-                {{ column.label }}
-                <div :class="['editable-table__sort-icon', isColumnHeadActive(column) && 'editable-table__sort-icon--active']" />
-              </span>
-            </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>
-        </template>
-        <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
-        <template
-          v-if="column.prop === '$$operation'"
-          #default="scope"
-        >
-          <el-popover
-            v-if="editingRowIndex !== scope.$index"
-            ref="operationPopoverRef"
-            placement="bottom"
-            trigger="click"
-            popper-class="operation-popover"
-          >
-            <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>
-          <div
-            v-else
-            class="operation-popover__save-cancel"
-          >
-            <div
-              class="btn-pointer operation-popover__btn"
-              @click="handleEditSave(scope.row)"
-            >
-              保存
-            </div>
-            <div
-              class="btn-pointer operation-popover__btn"
-              @click="handleEditCancel(scope.row)"
-            >
-              取消
-            </div>
-          </div>
-        </template>
-        <!-- 默认渲染、非编辑态，不需要特殊处理，el-table负责渲染 -->
-        <!-- 自定义插槽 -->
-        <template
-          v-else-if="column.slotName"
-          #default="scope"
-        >
-          <!-- 非编辑态 -->
-          <slot
-            v-if="scope.$index !== editingRowIndex"
-            v-bind="scope"
-            :name="column.slotName"
-          />
-          <!-- 编辑态 -->
-          <template v-else-if="scope.$index === editingRowIndex">
-            <!-- 自定义编辑 -->
-            <slot
-              v-if="column.editSlotName"
-              v-bind="{scope, column}"
-              :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>
-            <!-- 不支持编辑 -->
-            <slot
-              v-else
-              v-bind="scope"
-              :name="column.slotName"
-            />
-          </template>
-        </template>
-        <!-- 默认渲染列，编辑态 -->
-        <template
-          v-else-if="editingRowIndex !== -1"
-          #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>
-          <!-- 当前行编辑中，自定义编辑类型 -->
-          <slot
-            v-else-if="column.editSlotName && scope.$index === editingRowIndex"
-            v-bind="scope"
-            :name="column.editSlotName"
-          />
-          <!-- 当前行非编辑中 -->
-          <template v-else>
-            {{ column.formatter ? column.formatter(scope.row, column, scope.row[column.prop], scope.$index) : scope.row[column.prop] }}
-          </template>
-        </template>
-        <!-- hover状态渲染 -->
-        <template
-          v-else-if="column.hoverSlotName"
-          #default="scope"
-        >
-          <slot
-            v-if="scope.$index === hoveringCellInfo.rowIndex && column.prop === hoveringCellInfo.columnProperty"
-            v-bind="scope"
-            :name="column.hoverSlotName"
-          />
-          <slot
-            v-else-if="column.slotName"
-            v-bind="scope"
-            :name="column.slotName"
-          />
-          <template v-else>
-            {{ column.formatter ? column.formatter(scope.row, column, scope.row[column.prop], scope.$index) : scope.row[column.prop] }}
-          </template>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="pagination-wrap">
-      <div>共{{ total }}项数据</div>
-      <el-pagination
-        background
-        layout="sizes, prev, pager, next, jumper"
-        :page-sizes="[10, 15, 30, 60, 100]"
-        :page-size.sync="pageSize"
-        :pager-count="11"
-        :current-page="currentPage"
-        :total="total"
-        @size-change="handlePageSizeChange"
-        @current-change="handleCurrPageChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-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 { ITableDataItem, IColumnConfig, IDefaultOperationType, IColorList } from './types';
-
-// defineProps泛型参数如果从外部传入，编译报错
-interface IProps {
-  /** 表格数据 */
-  dataList: ITableDataItem[];
-  /** 列配置 */
-  columnConfig: IColumnConfig[];
-  /** 是否展示展开行 */
-  hasExpandRow?: boolean;
-  /** 是否展示序号 */
-  hasIndexColumn?: boolean;
-  /** 是否展示选择列 */
-  hasSelectionColumn?: boolean;
-  /** 是否支持行拖拽 */
-  rowDragAble?: boolean;
-  /** 表格总条数 */
-  total: number;
-  /** 自定义列操作，当前支持行编辑(edit)，删除(delete)，置顶(top)  */
-  defaultOperations?: IDefaultOperationType[];
-  /** 行背景色列表 */
-  colorList?: IColorList;
-  /** 左侧固定列数 */
-  leftFixedCount?: number;
-  /** 性能优化参数，调整拖拽的范围 */
-  dragSemiRange?: number;
-  /** 是否显示加载 */
-  loading?: boolean;
-  /** 是否隐藏显示设置按钮 */
-  hideViewSettingBtn?: boolean
-  /** 设置的缓存的key */
-  settingStorgeKey?: string
-  /** 前端排序，默认关闭 */
-  localSort?: boolean
-  /** 前端过滤，默认关闭 */
-  localFilter?: boolean
-  /** 页码 */
-  currentPage: number
-}
-
-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-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-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: '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>(), {
-  dataList: () => [],
-  columnConfig: () => [],
-  hasExpandRow: false,
-  hasIndexColumn: false,
-  hasSelectionColumn: false,
-  rowDragAble: false,
-  total: 0,
-  defaultOperations: () => [],
-  colorList: () => [],
-  leftFixedCount: 1,
-  dragSemiRange: 15,
-  loading: false,
-  hideViewSettingBtn: false,
-  settingStorgeKey: '',
-  localSort: false,
-  localFilter: false,
-  currentPage: 1,
-})
-
-// 同defineProps一样，不支持泛型参数从外部导入
-const emit = defineEmits<IEmits>()
-
-const showingColumns = ref<string[]>([]); // 表格中实际展示的列
-
-const actualColumns = computed(() => {
-  const res: IColumnConfig[] = [];
-  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
-    };
-    if (cnt > 0) {
-      item.fixed = 'left';
-      // eslint-disable-next-line no-plusplus
-      cnt--;
-    } else {
-      item.fixed = undefined;
-    }
-    res.push(item);
-  }
-
-  // 使用默认操作项，添加默认操作列。该列在编辑模式下隐藏
-  if (props.defaultOperations && props.defaultOperations.length > 0) {
-    res.push({
-      label: '操作',
-      prop: '$$operation',
-      'min-width': '100px',
-      fixed: 'right'
-    });
-  }
-
-  return res;
-})
-
-const sortFilterPopoverRef = ref<any>(null);
-const tableDomRef = ref<any>(null);
-const currScope = ref<any>(null);
-
-/************ 分页相关 *************/
-const beforePageChange = () => {
-  searchValue.value = {};
-}
-const {
-  pageSize,
-  handleCurrPageChange,
-  handlePageSizeChange,
-} = usePagination({
-  emit,
-  beforePageChange
-})
-
-/************ 表格单元格hover事件相关 ************ */
-const {
-  hoveringCellInfo,
-  setCellClassName,
-  debouncedHoverHandler
-} = useCellHover(tableDomRef)
-
-/************ 行背景色设置相关 ************ */
-const {
-  isDefaultColor,
-  getColorById,
-  setRowStyle,
-  handleColorChange,
-  colorPopoverRef
-} = useRowBgColor({
-  colorList: props.colorList,
-  emit
-})
-
-/************ 默认的操作相关 ************ */
-const {
-  operationPopoverRef,
-  editingRowData,
-  editingRowIndex,
-  handleDelete,
-  handleEdit,
-  handleEditSave,
-  handleEditCancel,
-  handleRowPinToTop,
-  closeAllExpandedRows
-} = useDefaultOperation({
-  emit,
-  tableDomRef,
-  pageSize,
-  props,
-  hasExpandRow: props.hasExpandRow
-})
-
-/************ 显示设置相关 ************ */
-const {
-  viewSettingDragSortOptions,
-  columnsToBeShown,
-  viewSettingVisible,
-  leftFixedColumnCount,
-  tempLeftFixedColumnCount,
-  handleInputTempLeftFixedColumnCount,
-  handleViewSettingShow,
-  handleViewSettingClose,
-  handleViewSettingConfirm
-} = useViewSetting({
-  tableDomRef,
-  showingColumns,
-  actualColumns,
-  props
-})
-
-/************ 列头部操作相关 ************ */
-const {
-  setSort,
-  clearSort,
-  setSearchParams,
-  isColumnHeadActive,
-  handleSort,
-  handleHeaderPopoverShow,
-  handleHeaderOperationConfirm,
-  handleHeaderOperationReset,
-  summaryList,
-  tableSummaryMethod,
-  filteredValue,
-  showColumnHeadSortIcon,
-  tempSortingColumn,
-  tempSearchValue,
-  tempFilteredValue,
-  tempSummaryList,
-  tempSortType,
-  sortingColumn,
-  isColumnFiltering,
-  searchValue,
-  inSorting,
-} = useColumnHeaderOperation({
-  tableDomRef,
-  sortFilterPopoverRef,
-  props,
-  emit,
-  showingColumns,
-})
-
-/************ 表格行拖拽和显示设置列拖拽 ************ */
-const beforeDragStart = () => {
-  // 如果有列存在排序，不允许拖拽
-  if (sortingColumn.value) {
-    Message.warning('已有列正在排序，不允许拖拽。');
-    return false;
-  }
-
-  // 如果有列存在筛选，不允许拖拽
-  if (isColumnFiltering.value) {
-    Message.warning('已有列正在筛选，不允许拖拽。');
-    return false;
-  }
-
-  editingRowIndex.value = -1; // 关闭编辑状态
-
-  return true
-}
-
-useDragSort({
-  emit,
-  props,
-  viewSettingDragSortOptions,
-  beforeDragStart,
-  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;
-}
-
-const setRowClassName = (scope) => {
-  return `
-    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);
-}
-
-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
-})
-
-</script>
-
-<style lang="less">
-@import './index.less';
+<template>
+  <div class="editable-table">
+    <div class="view-setting">
+      <div
+        v-if="!hideViewSettingBtn"
+        class="view-setting__btn-wrapper"
+      >
+        <div
+          class="view-setting__btn btn-pointer"
+          @click="handleViewSettingShow"
+        >
+          <i class="el-icon-setting" />
+          <div class="view-setting__btn-text">
+            显示设置
+          </div>
+        </div>
+      </div>
+
+      <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>
+
+    <!-- 列表展示，属性透传，列编辑 -->
+    <el-table
+      ref="tableDomRef"
+      v-loading="loading"
+      :data="dataList"
+      :row-style="setRowStyle"
+      :row-class-name="setRowClassName"
+      :cell-class-name="setCellClassName"
+      :show-summary="summaryList.length > 0"
+      :summary-method="tableSummaryMethod"
+      v-bind="$attrs"
+      border
+      @selection-change="handleSelectionChange"
+      @cell-mouse-enter="debouncedHoverHandler"
+      @header-dragend="doTableLayout"
+    >
+      <el-table-column
+        v-if="rowDragAble"
+        width="30px"
+        class-name="editable-table__drag-cell no-inner-cell-border"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+      >
+        <template #default="scope">
+          <div
+            class="row-drag-target editable-table__drag-icon"
+            :data-index="scope.$index"
+            @mousedown="currScope = scope"
+          >
+            <div
+              :data-index="scope.$index"
+              class="row-drag-target editable-table-drag-icon"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 展开行 -->
+      <el-table-column
+        v-if="hasExpandRow"
+        width="30px"
+        type="expand"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+        class-name="no-inner-cell-border"
+      >
+        <template #default="scope">
+          <slot
+            name="expand"
+            v-bind="scope"
+          />
+        </template>
+      </el-table-column>
+      <!-- 选择列 -->
+      <el-table-column
+        v-if="hasSelectionColumn"
+        width="45px"
+        align="center"
+        type="selection"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+        class-name="no-inner-cell-border"
+      />
+      <!-- 编号列 -->
+      <el-table-column
+        v-if="hasIndexColumn"
+        min-width="30px"
+        type="index"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+        class-name="no-inner-cell-border"
+      />
+      <!-- 颜色选择列 -->
+      <el-table-column
+        v-if="colorList && colorList.length > 0"
+        width="22px"
+        class-name="editable-table__color-column no-inner-cell-border"
+        :fixed="leftFixedColumnCount > 0 ? 'left' : false"
+      >
+        <template #header>
+          <div 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数组元素顺序发生变化，列顺序也不会改变。原因未知 -->
+      <el-table-column
+        v-for="(column, index) in actualColumns"
+        :key="column.prop + index"
+        resizable
+        class-name="editable-table__data-column"
+        :filtered-value="Array.isArray(filteredValue[column.prop]) ? filteredValue[column.prop] : []"
+        v-bind="getColumnBindProps(column)"
+      >
+        <template
+          v-if="showColumnHeadSortIcon(column)"
+          #header="scope"
+        >
+          <biz-table-header-popover
+            ref="sortFilterPopoverRef"
+            :head-active="isColumnHeadActive(column)"
+            :column="column"
+            :showing-columns="showingColumns"
+            :temp-summary-list="tempSummaryList"
+            :temp-sorting-column="tempSortingColumn"
+            :temp-sort-type="tempSortType"
+            :temp-filtered-value="tempFilteredValue"
+            :temp-search-value="tempSearchValue"
+            @update:tempSummaryList="val => { tempSummaryList = val }"
+            @update:tempFilteredValue="(key, value) => { tempFilteredValue[key] = value }"
+            @update:tempSearchValue="(key, value) => { tempSearchValue[key] = value }"
+            @popover-show="() => handleHeaderPopoverShow(column)"
+            @update:sort="(type) => handleSort(type, column)"
+            @reset="() => handleHeaderOperationReset(column, scope)"
+            @confirm="() => handleHeaderOperationConfirm(column, scope)"
+          >
+            <template #filter-item="item">
+              <slot
+                :name="column.prop + '-filter-item'"
+                v-bind="item"
+              >
+                {{ item.text }}
+              </slot>
+            </template>
+            <template #summay-item>
+              <slot
+                :name="column.prop + '-summay-item'"
+                v-bind="column"
+              >
+                {{ column.label }}
+              </slot>
+            </template>
+          </biz-table-header-popover>
+        </template>
+        <!-- 默认操作按钮，defaultOperations属性不为空数组时展示。编辑状态下隐藏 -->
+        <template
+          v-if="column.prop === '$$operation'"
+          #default="scope"
+        >
+          <el-popover
+            v-if="editingRowIndex !== scope.$index"
+            ref="operationPopoverRef"
+            placement="bottom"
+            trigger="click"
+            popper-class="operation-popover"
+          >
+            <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>
+          <div
+            v-else
+            class="operation-popover__save-cancel"
+          >
+            <div
+              class="btn-pointer operation-popover__btn"
+              @click="handleEditSave(scope.row)"
+            >
+              保存
+            </div>
+            <div
+              class="btn-pointer operation-popover__btn"
+              @click="handleEditCancel(scope.row)"
+            >
+              取消
+            </div>
+          </div>
+        </template>
+        <!-- 默认渲染、非编辑态，不需要特殊处理，el-table负责渲染 -->
+        <!-- 自定义插槽 -->
+        <template
+          v-else-if="column.slotName"
+          #default="scope"
+        >
+          <!-- 非编辑态 -->
+          <slot
+            v-if="scope.$index !== editingRowIndex"
+            v-bind="scope"
+            :name="column.slotName"
+          />
+          <!-- 编辑态 -->
+          <template v-else-if="scope.$index === editingRowIndex">
+            <!-- 自定义编辑 -->
+            <slot
+              v-if="column.editSlotName"
+              v-bind="{scope, column}"
+              :name="column.editSlotName"
+            />
+            <!-- 内置编辑类型 -->
+            <biz-edit-cell
+              v-else-if="column.editType"
+              v-model="editingRowData[column.prop]"
+              :column="column"
+            />
+            <!-- 不支持编辑 -->
+            <slot
+              v-else
+              v-bind="scope"
+              :name="column.slotName"
+            />
+          </template>
+        </template>
+        <!-- 默认渲染列，编辑态 -->
+        <template
+          v-else-if="editingRowIndex !== -1"
+          #default="scope"
+        >
+          <!-- 当前行编辑中，内置编辑类型 -->
+          <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"
+            v-bind="scope"
+            :name="column.editSlotName"
+          />
+          <!-- 当前行非编辑中 -->
+          <template v-else>
+            {{ column.formatter ? column.formatter(scope.row, column, scope.row[column.prop], scope.$index) : scope.row[column.prop] }}
+          </template>
+        </template>
+        <!-- hover状态渲染 -->
+        <template
+          v-else-if="column.hoverSlotName"
+          #default="scope"
+        >
+          <slot
+            v-if="scope.$index === hoveringCellInfo.rowIndex && column.prop === hoveringCellInfo.columnProperty"
+            v-bind="scope"
+            :name="column.hoverSlotName"
+          />
+          <slot
+            v-else-if="column.slotName"
+            v-bind="scope"
+            :name="column.slotName"
+          />
+          <template v-else>
+            {{ column.formatter ? column.formatter(scope.row, column, scope.row[column.prop], scope.$index) : scope.row[column.prop] }}
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrap">
+      <div>共{{ total }}项数据</div>
+      <el-pagination
+        background
+        layout="sizes, prev, pager, next, jumper"
+        :page-sizes="[10, 15, 30, 60, 100]"
+        :page-size.sync="pageSize"
+        :pager-count="11"
+        :current-page="currentPage"
+        :total="total"
+        @size-change="handlePageSizeChange"
+        @current-change="handleCurrPageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BizColorSelect from './features/bizColorSelect.vue';
+import BizViewSettingDialog from './features/bizViewSettingDialog.vue'
+import BizTableHeaderPopover from './features/bizTableHeaderPopover.vue'
+import BizEditCell from './features/bizEditCell.vue'
+
+import { computed, nextTick, ref, watch } from 'vue';
+import { Message } from 'element-ui';
+
+import {
+  usePagination,
+  useCellHover,
+  useRowBgColor,
+  useDefaultOperation,
+  useColumnHeaderOperation,
+  useDragSort,
+} from './bizHooks'
+
+import { ITableDataItem, IColumnConfig, IDefaultOperationType, IColorList } from './types';
+
+// defineProps泛型参数如果从外部传入，编译报错
+interface IProps {
+  /** 表格数据 */
+  dataList: ITableDataItem[];
+  /** 列配置 */
+  columnConfig: IColumnConfig[];
+  /** 是否展示展开行 */
+  hasExpandRow?: boolean;
+  /** 是否展示序号 */
+  hasIndexColumn?: boolean;
+  /** 是否展示选择列 */
+  hasSelectionColumn?: boolean;
+  /** 是否支持行拖拽 */
+  rowDragAble?: boolean;
+  /** 表格总条数 */
+  total: number;
+  /** 自定义列操作，当前支持行编辑(edit)，删除(delete)，置顶(top)  */
+  defaultOperations?: IDefaultOperationType[];
+  /** 行背景色列表 */
+  colorList?: IColorList;
+  /** 左侧固定列数 */
+  leftFixedCount?: number;
+  /** 性能优化参数，调整拖拽的范围 */
+  dragSemiRange?: number;
+  /** 是否显示加载 */
+  loading?: boolean;
+  /** 是否隐藏显示设置按钮 */
+  hideViewSettingBtn?: boolean
+  /** 设置的缓存的key */
+  settingStorgeKey?: string
+  /** 前端排序，默认关闭 */
+  localSort?: boolean
+  /** 前端过滤，默认关闭 */
+  localFilter?: boolean
+  /** 页码 */
+  currentPage: number
+}
+
+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-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-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: '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>(), {
+  dataList: () => [],
+  columnConfig: () => [],
+  hasExpandRow: false,
+  hasIndexColumn: false,
+  hasSelectionColumn: false,
+  rowDragAble: false,
+  total: 0,
+  defaultOperations: () => [],
+  colorList: () => [],
+  leftFixedCount: 1,
+  dragSemiRange: 15,
+  loading: false,
+  hideViewSettingBtn: false,
+  settingStorgeKey: '',
+  localSort: false,
+  localFilter: false,
+  currentPage: 1,
+});
+
+// 同defineProps一样，不支持泛型参数从外部导入
+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;
+
+  // 列排序和列过滤
+  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
+    };
+    if (cnt > 0) {
+      item.fixed = 'left';
+      // eslint-disable-next-line no-plusplus
+      cnt--;
+    } else {
+      item.fixed = undefined;
+    }
+    res.push(item);
+  }
+
+  // 使用默认操作项，添加默认操作列。该列在编辑模式下隐藏
+  if (props.defaultOperations && props.defaultOperations.length > 0) {
+    res.push({
+      label: '操作',
+      prop: '$$operation',
+      'min-width': '100px',
+      fixed: 'right'
+    });
+  }
+
+  return res;
+});
+
+const sortFilterPopoverRef = ref<any>(null);
+const tableDomRef = ref<any>(null);
+const currScope = ref<any>(null);
+
+/************ 分页相关 *************/
+const beforePageChange = () => {
+  searchValue.value = {};
+};
+const {
+  pageSize,
+  handleCurrPageChange,
+  handlePageSizeChange,
+} = usePagination({
+  emit,
+  beforePageChange
+});
+
+/************ 表格单元格hover事件相关 ************ */
+const {
+  hoveringCellInfo,
+  setCellClassName,
+  debouncedHoverHandler
+} = useCellHover(tableDomRef);
+
+/************ 行背景色设置相关 ************ */
+const {
+  setRowStyle,
+} = useRowBgColor({
+  colorList: props.colorList,
+  emit
+});
+
+/************ 默认的操作相关 ************ */
+const {
+  operationPopoverRef,
+  editingRowData,
+  editingRowIndex,
+  handleDelete,
+  handleEdit,
+  handleEditSave,
+  handleEditCancel,
+  handleRowPinToTop,
+  closeAllExpandedRows
+} = useDefaultOperation({
+  emit,
+  tableDomRef,
+  pageSize,
+  props,
+  hasExpandRow: props.hasExpandRow
+});
+
+/************ 列头部操作相关 ************ */
+const {
+  setSort,
+  clearSort,
+  setSearchParams,
+  isColumnHeadActive,
+  handleSort,
+  handleHeaderPopoverShow,
+  handleHeaderOperationConfirm,
+  handleHeaderOperationReset,
+  summaryList,
+  tableSummaryMethod,
+  filteredValue,
+  showColumnHeadSortIcon,
+  tempSortingColumn,
+  tempSearchValue,
+  tempFilteredValue,
+  tempSummaryList,
+  tempSortType,
+  sortingColumn,
+  isColumnFiltering,
+  searchValue,
+  inSorting,
+} = useColumnHeaderOperation({
+  tableDomRef,
+  sortFilterPopoverRef,
+  props,
+  emit,
+  showingColumns,
+});
+
+/************ 表格行拖拽和显示设置列拖拽 ************ */
+const beforeDragStart = () => {
+  // 如果有列存在排序，不允许拖拽
+  if (sortingColumn.value) {
+    Message.warning('已有列正在排序，不允许拖拽。');
+    return false;
+  }
+
+  // 如果有列存在筛选，不允许拖拽
+  if (isColumnFiltering.value) {
+    Message.warning('已有列正在筛选，不允许拖拽。');
+    return false;
+  }
+
+  editingRowIndex.value = -1; // 关闭编辑状态
+
+  return true;
+};
+
+useDragSort({
+  emit,
+  props,
+  viewSettingDragSortOptions,
+  beforeDragStart,
+  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;
+};
+
+const setRowClassName = (scope) => {
+  return `
+    custom-row-classname 
+    custom-row-classname-${scope.rowIndex} 
+    ${scope.row.isPinned ? 'custom-row-classname-pinned' : ''}
+  `;
+};
+
+const handleSelectionChange = (e) => {
+  emit('selection-change', e);
+};
+
+const bizViewSettingDialogRef = ref(null as unknown as InstanceType<typeof BizViewSettingDialog>)
+const handleViewSettingShow = () => bizViewSettingDialogRef.value.open()
+
+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;
+});
+
+</script>
+
+<style lang="less">
+@import './index.less';
 </style>