lis8.0-vue3/src/components/elTable/index.vue

<template>
  <div class="custom-table-wrapper">
    <!-- 表格主体 -->
    <el-table ref="tableRef" :data="tableData" v-loading="loading" :stripe="config.stripe || false"
      :border="config.border" :fit="config.fit !== true" :show-header="config.showHeader !== false"
      :highlight-current-row="config.highlightCurrentRow || false" :row-class-name="config.rowClassName"
      :header-cell-style="config.headerCellStyle" :cell-style="config.cellStyle" :max-height="config.maxHeight"
      :show-summary="config.summary" :summary-method="getSummaries" :sum-text="config.sumText" :height="config.height"
      :size="config.size || 'default'" :empty-text="config.emptyText || '暂无数据'"
      @selection-change="handleSelectionChange" @current-change="handleCurrentChange" @row-click="handleRowClick"
      :header-cell-class-name="enableColumnDrag ? 'el-table-header-cell' : ''" @row-dblclick="handleRowDblclick"
      @sort-change="handleSortChange" v-bind="$attrs">


      <!-- 动态列 -->
      <template v-for="item in columns" :key="item.prop">
        <!-- 多选列 -->
        <el-table-column v-if="item.type == 'selection' && item.visible" type="selection" :width="item.width || 55"
          :fixed="item.fixed" :align="item.align || 'left'" />
        <!-- 序号列 -->
        <el-table-column v-if="item.type == 'index' && item.visible" type="index" class-name="el-table-column--index"
          :label="item.label || '序号'" :width="item.width || 60" :fixed="item.fixed" :align="item.align || 'left'"
          :index="getIndex" />

        <!-- 自定义插槽列 行数据插槽（有row属性） -->
        <el-table-column v-if="!item.type && item.slot && item.visible" :prop="item.prop" :label="item.label"
          :width="item.width" :min-width="item.minWidth" :fixed="item.fixed" :align="item.align || 'left'"
          :sortable="item.sortable" :show-overflow-tooltip="item.showOverflowTooltip !== false">
          <template #default="scope">
            <slot :name="item.slot" :row="scope.row" :$index="scope.$index" />
          </template>
        </el-table-column>

        <!-- 普通列 -->
        <el-table-column v-if="!item.type && !item.slot && item.visible" :prop="item.prop" :label="item.label"
          :width="item.width" :min-width="item.minWidth" :fixed="item.fixed" :align="item.align || 'left'"
          :sortable="item.sortable" :show-overflow-tooltip="item.showOverflowTooltip !== false"
          :formatter="item.formatter">
          <!-- 表头插槽 （无row属性）-->
          <template v-if="item.headerSlot" #header="scope">
            <slot :name="item.headerSlot" :column="scope.column" :$index="scope.$index" />
          </template>
        </el-table-column>
      </template>

      <!-- 操作列 -->
      <el-table-column v-if="$slots.action" :label="config.actionLabel || '操作'" :width="config.actionWidth"
        :min-width="config.actionMinWidth || 120" :fixed="config.actionFixed || 'right'"
        :align="config.actionAlign || 'center'">
        <template #default="scope">
          <slot name="action" :row="scope.row" :column="scope.column" :$index="scope.$index" />
        </template>
      </el-table-column>

      <!-- 空数据插槽 -->
      <template v-if="$slots.empty" #empty>
        <slot name="empty" />
      </template>
    </el-table>

    <!-- 分页组件 -->
    <div v-if="pagination.show" class="pagination-wrapper">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="currentPageSize" :total="pagination.total"
        :page-sizes="pagination.pageSizes || [10, 20, 50, 100]"
        :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
        :background="pagination.background !== false" :small="pagination.small || false"
        :disabled="pagination.disabled || false" @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watch, PropType, onMounted } from "vue";
import { TableColumnCtx } from 'element-plus';
// @ts-ignore
import Sortable from 'sortablejs'; // 引入sortablejs
interface TableColumn {
  prop?: string;
  type?: string; // 'selection' | 'index' | undefined
  key?: string | number;
  label?: string;
  width?: string | number;
  minWidth?: string | number;
  fixed?: boolean | string;
  align?: string;
  sortable?: boolean;
  showOverflowTooltip?: boolean;
  formatter?: Function;
  slot?: string;
  headerSlot?: string;
  visible?: boolean; // 是否显示列
}

// 在子组件中定义插槽类型
defineSlots<{
  // 具名插槽和动态插槽（不含 default）
  [slotName: string]: (props: { row?: any; column?: any; $index?: number }) => any;
}>();

// Props 定义
const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    default: () => [],
  },
  // 表格列配置
  columns: {
    type: Array as PropType<TableColumn[]>,
    default: () => [],
  },
  // 表格配置
  config: {
    type: Object,
    default: () => ({}),
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 分页配置
  pagination: {
    type: Object,
    default: () => ({
      show: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
    }),
  },
  // 拖拽列
  enableColumnDrag: {
    type: Boolean,
    default: false
  }
});



// Emits 定义
const emit = defineEmits([
  "selection-change",
  "current-change",
  "row-click",
  "row-dblclick",
  "sort-change",
  "page-change",
  "size-change",
  "column-drag-end",
]);

// 响应式数据
const tableRef = ref();
const currentPage = ref(props.pagination.currentPage || 1); // 第几页
const currentPageSize = ref(props.pagination.pageSize || 10); // 一页显示多少条

// 计算属性
const tableData = computed(() => {
  if (props.pagination.show && props.pagination.clientPaging) {
    // 客户端分页
    const start = (currentPage.value - 1) * currentPageSize.value;
    const end = start + currentPageSize.value;
    return props.data.slice(start, end);
  }
  return props.data;
});

// 序号计算
const getIndex = (index: number) => {
  if (props.pagination.show && !props.pagination.clientPaging) {
    return (currentPage.value - 1) * currentPageSize.value + index + 1;
  }
  return index + 1;
};

// const headerCellClassName = (column: TableColumnCtx<any>) => {
//   if (!column.column.property) {
//     return ''; // 不添加类名
//   } else {
//     return 'el-table-header-cell'; // 添加自定义类名
//   }
// };

// 计算列合计
// 自定义汇总方法 - 只计算指定列
const getSummaries = ({ columns, data }: { columns: any, data: any }) => {
  const summaries = columns.map(() => '');
  if (props.config.summaryField.length > 0) {
    props.config.summaryField.forEach((v: any) => {
      const index = columns.find((column: any) => column.property === v)?.no;
      const summaryData = data.map((item: any) => item[v]);
      const summary = summaryData.reduce((acc: any, cur: any) => Number(acc) + Number(cur), 0);
      summaries[index] = summary;
    });
    summaries[0] = props.config.sumText;
  }

  return summaries;
};
// 事件处理
const handleSelectionChange = (selection: any[]) => {
  emit("selection-change", selection);
};

const handleCurrentChange = (currentRow: any, oldCurrentRow: any) => {
  emit("current-change", currentRow, oldCurrentRow);
};

const handleRowClick = (row: any, column: TableColumnCtx<any>, event: Event) => {
  emit("row-click", row, column, event);
};

const handleRowDblclick = (row: any, column: TableColumnCtx<any>, event: Event) => {
  emit("row-dblclick", row, column, event);
};

const handleSortChange = (sortInfo: Object) => {
  emit("sort-change", sortInfo);
};

const handleSizeChange = (size: number) => {
  currentPageSize.value = size;
  currentPage.value = 1;
  emit("size-change", {
    pageSize: size,
    currentPage: 1,
  });
};

const handleCurrentPageChange = (page: number) => {
  currentPage.value = page;
  emit("page-change", {
    currentPage: page,
    pageSize: currentPageSize.value,
  });
};



// 初始化列拖拽功能
onMounted(() => {
  if (props.enableColumnDrag && tableRef.value) {
    initColumnDrag();
  }
});



// 监听分页配置变化
watch(
  () => props.pagination.currentPage,
  (newVal) => {
    if (newVal) {
      currentPage.value = newVal;
    }
  },
);



watch(
  () => props.pagination.pageSize,
  (newVal) => {
    if (newVal) {
      currentPageSize.value = newVal;
    }
  },
);


// 初始化列拖拽
const initColumnDrag = () => {
  // 获取表头单元格
  const tableHeader = tableRef.value.$el.querySelector('.el-table__header-wrapper thead tr');
  if (!tableHeader) return;
  // 初始化拖拽
  const sortable = new Sortable(tableHeader, {
    animation: 150, // 动画时间
    handle: '.el-table-header-cell', //  拖拽手柄
    ghostClass: 'sortable-ghost', // 拖拽时的占位符样式
    // filter: '.el-table-column--selection, .el-table-column--index', // 排除选择列和序号列
    onEnd: (evt: any) => {
      // console.log('evt==>', evt);
      // 排除固定列和选择列、序号列
      const visibleColumns = props.columns.filter(col => col.visible !== false);

      // 过滤掉固定列
      const draggableColumns = visibleColumns.filter(col => !col.fixed);

      // 如果发生了位置变化
      if (evt.oldIndex !== evt.newIndex && draggableColumns.length) {
        // 复制原数组并调整顺序
        const newColumns = [...draggableColumns];
        const [movedItem] = newColumns.splice(evt.oldIndex, 1);
        newColumns.splice(evt.newIndex, 0, movedItem);

        // 更新原始columns数组中对应列的位置
        const updatedColumns = [...props.columns];
        // 先移除所有可拖拽列
        const nonDraggableColumns = updatedColumns.filter(col => col.fixed);
        // 合并固定列和新顺序的可拖拽列
        const resultColumns = nonDraggableColumns.concat(newColumns);

        // 触发事件，通知父组件列顺序已改变
        emit('column-drag-end', {
          oldIndex: evt.oldIndex,
          newIndex: evt.newIndex,
          columns: resultColumns
        });
      }
    }
  });
};


// 暴露方法
const clearSelection = () => {
  tableRef.value?.clearSelection();
};

const toggleRowSelection = (row: Object, selected: boolean) => {
  tableRef.value?.toggleRowSelection(row, selected);
};

const toggleAllSelection = () => {
  tableRef.value?.toggleAllSelection();
};

const setCurrentRow = (row: Object) => {
  tableRef.value?.setCurrentRow(row);
};

const clearSort = () => {
  tableRef.value?.clearSort();
};

const doLayout = () => {
  tableRef.value?.doLayout();
};

const sort = (prop: string, order: any) => {
  tableRef.value?.sort(prop, order);
};

// 导出方法
defineExpose({
  clearSelection,
  toggleRowSelection,
  toggleAllSelection,
  setCurrentRow,
  clearSort,
  doLayout,
  sort,
  tableRef,
  initColumnDrag
});
</script>

<style scoped lang="scss">
.custom-table-wrapper {
  width: 100%;
}



// 只在拖拽手柄上显示移动光标
:deep(.el-table-header-cell .cell) {
  cursor: move;
  /* 恢复默认光标 */
}

// 拖拽手柄样式（使用排序图标作为拖拽手柄）
:deep(.el-table-header-cell .sort-caret) {
  // cursor: move;
  /* 只在排序图标处显示移动光标 */
  // margin-left: 1px;
}

// 保留列宽调整的光标样式
:deep(.el-table__header-wrapper .el-table__header tr th .el-table__header-drag-icon) {
  cursor: col-resize !important;
}





.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
  margin-top: 16px;
  margin-right: 20px;
}

// /* 修改选中行背景色 */
// ::v-deep .el-table__body tr.current-row>td {
//   background-color: #a4beef !important;
// }

// /* 可选：修改悬停颜色 */
// ::v-deep .el-table__body tr.hover-row>td {
//   background-color: #a4beef !important;
// }

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    justify-content: center;
  }

  .pagination-wrapper :deep(.el-pagination) {
    flex-wrap: wrap;
  }
}
</style>