sl-sfy-safety/src/components/BasicTable.vue

<template>
  <div class="basic-table">
    <el-table
      ref="tableRef"
      v-bind="props.tableConfig"
      v-loading="props.tableConfig.loading"
      :data="props.tableData"
      @selection-change="handleSelectionChange"
      border
    >
      <template #empty>
        <img :src="EmptyImg" alt="empty" />
        <span>{{ props.tableConfig.emptyText }}</span>
      </template>
      <TableColumn v-for="column in props.tableConfig.columns" :key="column.prop || column.label" :column="column">
        <template v-for="(_, name) in $slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </TableColumn>
    </el-table>
    <el-pagination
      v-if="props.tableConfig.pagination && props.tableConfig.pagination.total > 0"
      :current-page="props.tableConfig.pagination.pageNumber"
      :page-size="props.tableConfig.pagination.pageSize"
      :page-sizes="props.pageSizeConfig || PAGE_SIZE_CONFIG"
      :layout="DEFAULT_PAGINATION_LAYOUT"
      background
      :total="props.tableConfig.pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import TableColumn from './TableColumn.vue';
  import type { ElTable } from 'element-plus';
  import type { BasicTableProps } from '@/types/basic-table';
  import { PAGE_SIZE_CONFIG, DEFAULT_PAGINATION_LAYOUT } from '@/constant/pagination';
  import EmptyImg from 'assets/images/empty@1X.png';

  const selectedIds = ref<number[]>([]);
  const tableRef = ref<InstanceType<typeof ElTable>>();

  const props = defineProps<{
    tableConfig: BasicTableProps;
    tableData: any[];
    pageSizeConfig?: number[];
  }>();
  const emits = defineEmits<{
    (e: 'update:pageSize', value: number): void;
    (e: 'update:pageNumber', value: number): void;
    (e: 'update:selection', value: any[]): void;
  }>();
  const handleSizeChange = (value: number) => {
    emits('update:pageSize', value);
  };

  const handleCurrentChange = (value: number) => {
    emits('update:pageNumber', value);
  };

  const handleSelectionChange = (selection: any[]) => {
    selectedIds.value = selection.map((item) => item.id);
    emits('update:selection', selection);
  };

  const clearSelection = () => {
    if (!tableRef.value) return;
    tableRef.value.clearSelection();
    selectedIds.value = [];
    emits('update:selection', []);
  };

  defineExpose({
    selectedIds,
    clearSelection,
  });
</script>

<style lang="scss" scoped>
  .basic-table {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  .el-table {
    width: 100%;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
  :deep(.el-loading-mask) {
    background-color: rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table__empty-text) {
    @include flex-center;
    flex-direction: column;
    padding-top: 20px;
    img {
      width: 510px;
    }
  }
  :deep(.el-table__empty-block) {
    height: calc(100vh - 450px) !important;
  }
</style>