@lx-frontend/wrap-element-ui 0.4.6-beta.2 → 1.0.0-beta

package/src/components/EditableTable/index.vue

@@ -0,0 +1,842 @@
+<template>
+  <div class="editable-table">
+    <div class="view-setting">
+      <div 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"
+        :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
+                v-model="leftFixedColumnCount"
+                class="view-setting__content-right-input"
+              />
+              列
+            </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="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.isColumnSearchAble"
+                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.filters && column.filters.length > 0"
+                class="sort-filter__filter"
+              >
+                <div class="sort-filter__filter-title">
+                  筛选
+                </div>
+                <el-checkbox-group
+                  v-model="tempFilteredValue[column.prop]"
+                  class="sort-filter__filter-checkbox-group"
+                >
+                  <el-checkbox
+                    v-for="item in column.filters"
+                    :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>
+              </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(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.sync="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;
+}
+
+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
+}
+
+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
+})
+
+// 同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 (item) {
+      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,
+  currentPage,
+  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,
+  currentPage,
+  hasExpandRow: props.hasExpandRow
+})
+
+/************ 显示设置相关 ************ */
+const {
+  viewSettingDragSortOptions,
+  columnsToBeShown,
+  viewSettingVisible,
+  leftFixedColumnCount,
+  handleViewSettingShow,
+  handleViewSettingClose,
+  handleViewSettingConfirm
+} = useViewSetting({
+  tableDomRef,
+  showingColumns,
+  actualColumns,
+  props
+})
+
+/************ 列头部操作相关 ************ */
+const {
+  isColumnHeadActive,
+  handleSort,
+  handleHeaderPopoverShow,
+  handleHeaderOperationConfirm,
+  handleHeaderOperationReset,
+  summaryList,
+  tableSummaryMethod,
+  filteredValue,
+  showColumnHeadSortIcon,
+  tempSortingColumn,
+  tempSearchValue,
+  tempFilteredValue,
+  tempSummaryList,
+  tempSortType,
+  sortingColumn,
+  isColumnFiltering,
+  searchValue,
+  inSorting
+} = useColumnHeaderOperation({
+  tableDomRef,
+  sortFilterPopoverRef,
+  props
+})
+
+/************ 表格行拖拽和显示设置列拖拽 ************ */
+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,
+  currentPage,
+  pageSize,
+  currScope,
+  tableDomRef,
+})
+
+const doTableLayout = async () => {
+  await nextTick();
+  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, ...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,
+  elTableRef: tableDomRef
+})
+
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>