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

<template>
  <div class="basic-table">
    <el-table
      v-bind="props.tableConfig"
      v-loading="props.tableConfig.loading"
      :data="props.tableData"
      @selection-change="handleSelectionChange"
    >
      <template #empty>
        <img :src="EmptyImg" alt="empty" />
        <span>{{ props.tableConfig.emptyText }}</span>
      </template>
      <el-table-column
        v-for="column in props.tableConfig.columns"
        :key="column.prop"
        v-bind="column"
        :prop="column.prop"
        :label="column.label"
      >
        <template #default="scope">
          <Render v-if="column.render" :render="column.render" :row="scope.row" />
          <slot v-else-if="column.slot" :name="column.slot" :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="props.tableConfig.pagination && props.tableData.length > 0"
      :current-page="props.tableConfig.pagination.pageNumber"
      :page-size="props.tableConfig.pagination.pageSize"
      :page-sizes="props.pageSizeConfig || PAGE_SIZE_CONFIG"
      layout="prev, pager, next, jumper, sizes, total"
      background
      :total="props.tableConfig.pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { BasicTableProps } from '@/types/basic-table';
  import { PAGE_SIZE_CONFIG } from '@/constant/pagination';
  import EmptyImg from 'assets/images/empty@1X.png';
  const selectedIds = ref<number[]>([]);
  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);
  };
  defineExpose({
    selectedIds,
  });
</script>

<style lang="scss" scoped>
  .basic-table {
    display: flex;
    flex-direction: column;
    gap: 20cpx;
    width: 100%;
    height: 100%;
  }
  .el-table {
    width: 100%;
  }
  :deep(.el-table th),
  :deep(.el-table.is-scrolling-none th.el-table-fixed-column--left),
  :deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
    font-size: 14cpx;
    color: rgba($text-color, 0.85);
    background-color: #fafafa !important;
  }
  :deep(.el-table td) {
    font-size: 14cpx;
    color: rgba($text-color, 0.65);
    border: none;
    padding: 16cpx;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    :deep(.btn-prev),
    :deep(.btn-next),
    :deep(.el-pager li) {
      width: 32cpx;
      height: 32cpx;
    }
    :deep(.el-pager li),
    :deep(.el-pagination__jump),
    :deep(.el-pagination__total),
    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper),
    :deep(.el-select__suffix) {
      font-size: 14cpx;
    }
    :deep(.el-input__wrapper) {
      padding: 1cpx 11cpx;
    }
    :deep(.el-select__wrapper) {
      padding: 4cpx 12cpx;
    }
    :deep(.el-input__inner){
      width: 34cpx;
      height: 30cpx;
    }
  }
  :deep(.el-loading-mask) {
    background-color: rgba(0, 0, 0, 0.05);
  }
  :deep(.el-table--fit .el-table__inner-wrapper:before) {
    height: 0;
  }
  :deep(.el-table__empty-text) {
    @include flex-center;
    flex-direction: column;
    img {
      width: 510cpx;
    }
  }
</style>