daimp-front/sub-government-affairs-service/src/components/tableComponent.vue

<template>
  <div class="custom-table-container">
    <el-table
      v-loading="loading"
      style="flex: 1; display: flex; flex-direction: column; text-align: center"
      :max-height="tableMaxHeight"
      :data="tableData"
      :stripe="showStripe"
      :fit="true"
      v-bind="$attrs"
      :header-cell-class-name="headerCellClassName"
      :cell-class-name="cellClassName"
      @selection-change="handleSelectionChange"
    >
      <!-- 树形展开 -->
      <el-table-column v-if="tree" type="expand" :header-class-name="headerCellClassName">
        <template #default="scope">
          <slot name="tree" :row="scope.row"></slot>
        </template>
      </el-table-column>

      <!-- 首列多选框 -->
      <el-table-column v-if="showSelection" type="selection" width="30" align="center" fixed :header-class-name="headerCellClassName" />
      <el-table-column v-if="showSort" label="序号" width="70" fixed align="center" :header-class-name="headerCellClassName">
        <template #default="{ $index }">
          {{ (currentPage - 1) * pageSize + $index + 1 }}
        </template>
      </el-table-column>

      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align || 'center'"
          :fixed="column.fixed ?? false"
          :sortable="column.sortable"
          :header-class-name="column.headerClassName"
        >
          <!-- 支持插槽 -->
          <template v-if="column.slotName" #default="scope">
            <slot :name="column.slotName" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        v-model:current-page="computedCurrentPage"
        v-model:page-size="computedPageSize"
        :page-sizes="pageSizes"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="pageSizeChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  // 列配置
  columns: {
    type: Array,
    default: () => [],
  },
  tree: {
    type: Boolean,
    default: false,
  },
  // 当前页码（由外部传入）
  currentPage: {
    type: Number,
    default: 1,
  },
  // 每页数量（由外部传入）
  pageSize: {
    type: Number,
    default: 10,
  },
  // 总条数
  total: {
    type: Number,
    default: 0,
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true,
  },
  // 是否显示边框:border="showBorder"添加到组件会显示横竖边框，不添加只显示横边框
  showBorder: {
    type: Boolean,
    default: true,
  },
  // 是否显示斑马纹
  showStripe: {
    type: Boolean,
    default: false,
  },
  // 是否显示首列多选框
  showSelection: {
    type: Boolean,
    default: false,
  },
  // 是否展示序号
  showSort: {
    type: Boolean,
    default: false,
  },
  // 每页显示条数选项
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50],
  },
  // 是否使用小型分页样式
  small: {
    type: Boolean,
    default: false,
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否为分页按钮添加背景色
  background: {
    type: Boolean,
    default: true,
  },
  // 自定义表头类名函数
  headerCellClassName: {
    type: Function,
    default: () => 'custom-header',
  },
  // 自定义单元格类名函数
  cellClassName: {
    type: Function,
    default: () => 'custom-cell',
  },
  rowkey: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change', 'selection-change']);

// 每页数量（双向绑定）
const computedPageSize = computed({
  get: () => props.pageSize,
  set: (val) => emit('update:pageSize', val),
});
// 当前页码（双向绑定）
const computedCurrentPage = computed({
  get: () => props.currentPage,
  set: (val) => emit('update:currentPage', val),
});

// 分页大小改变
const pageSizeChange = (val) => {
  // console.log(`每页 ${val} 条`);
  // console.log(props.currentPage);
  emit('update:pageSize', val);
  emit('page-change', {
    page: props.currentPage,
    pageSize: val,
  });
};

// 当前页改变
const handleCurrentChange = (val) => {
  // console.log(`当前页改变 ${val} 页`);
  emit('page-change', {
    page: val,
    pageSize: props.pageSize,
  });
};

// 多选框变化
const handleSelectionChange = (selection) => {
  const selectedIds = selection.map((row) => (props.rowkey == '' ? row.id : row[props.rowkey]));
  emit('selection-change', selection, selectedIds);
};

const tableRef = ref(null);
const tableMaxHeight = ref(null); // 使用max-height而不是height

// 自动计算最大高度（预留分页器空间）
const calculateMaxHeight = () => {
  const paginationHeight = 60; // 分页器固定高度
  const container = tableRef.value?.$el?.parentElement;
  if (container) {
    const containerHeight = container.clientHeight;
    tableMaxHeight.value = containerHeight - paginationHeight;
  }
};

onMounted(() => {
  calculateMaxHeight();
  window.addEventListener('resize', calculateMaxHeight);

  // 添加MutationObserver监听父容器尺寸变化
  const observer = new MutationObserver(calculateMaxHeight);
  if (tableRef.value?.$el?.parentElement) {
    observer.observe(tableRef.value.$el.parentElement, {
      attributes: true,
      attributeFilter: ['style', 'class'],
    });
  }
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', calculateMaxHeight);
});
</script>

<style lang="scss" scoped>
.custom-table-container {
  // position: relative;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  height: 100%; /* 关键：继承父容器高度 */
  overflow: hidden; /* 防止内容溢出 */

  /* 表格弹性布局 */
  :deep(.el-table) {
    flex: 1;
    display: flex;
    flex-direction: column;

    /* 表头固定 */
    .el-table__header-wrapper {
      flex-shrink: 0;
    }

    /* 表体可滚动 */
    .el-table__body-wrapper {
      flex: 1;
      overflow: auto;
    }
  }

  .demo-form-inline {
    text-align: left;
    padding-left: 20px;
    padding-top: 4px;
  }

  .pagination-container {
    margin-top: 20px;
    padding: 0 30px 0 20px;
    display: flex;
    justify-content: right;
    color: #999;
    font-weight: 400;
  }
  .custom-pagination-text {
    flex: 1;
    text-align: left;
    line-height: 32px;
    font-size: 14px;
  }

  .custom-pagination-size {
    text-align: right;
    line-height: 32px;
    margin-left: 20px;
    font-size: 14px;
  }

  /* 去除表格边框 */
  // :deep(.el-table) {
  //   --el-table-border-color: transparent;
  // }

  /* 自定义鼠标悬停颜色 */
  // :deep(.el-table__body tr:hover > td) {
  //   background-color: rgba(237 255 248) !important;
  // }

  /* 自定义表头样式 */
  :deep(.custom-header) {
    color: #333;
    background-color: #fafafa !important;
  }
  /* 自定义单元格样式 */
  :deep(.custom-cell) {
    color: #606266;
  }

  :deep(.el-pagination) {
    /* 整体分页样式 */
    font-size: 14px;
    font-weight: normal;

    /* 每页条数选择器 */
    .el-pagination__sizes {
      .el-input__inner {
        font-weight: 400;
      }
    }

    /* 跳页输入框 */
    .el-pagination__jump {
      font-weight: 400;
      // position: absolute;
      // right: 16px;
      // bottom: 12px;
      color: #999;
    }
  }
}
</style>