el-table查询功能封装

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElTable } from 'element-plus';

// 定义 Props，支持配置列和API请求
const props = defineProps<{
  columns: Array<{ prop: string; label: string; type?: string; [key: string]: any }>;
  requestApi: (params: any) => Promise<any>; // 核心：传入请求方法
}>();

// 内部状态
const tableData = ref([]);
const loading = ref(false);
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const searchParams = ref({}); // 假设这里绑定了外部传入的搜索表单

// 数据请求逻辑封装
const fetchData = async () => {
  loading.value = true;
  try {
    const { data, total } = await props.requestApi({
      ...searchParams.value,
      page: pagination.value.currentPage,
      size: pagination.value.pageSize,
    });
    tableData.value = data;
    pagination.value.total = total;
  } finally {
    loading.value = false;
  }
};

// 暴露给父组件的方法
defineExpose({ refresh: fetchData });

onMounted(fetchData);
</script>

<template>
  <div class="pro-table">
    <slot name="search" :params="searchParams"></slot>
    
    <el-table v-loading="loading" :data="tableData" border style="width: 100%" v-bind="$attrs">
      <template v-for="col in columns" :key="col.prop">
        <el-table-column v-if="col.type === 'selection'" type="selection" width="55" />
        <el-table-column v-else v-bind="col">
           <template #default="scope" v-if="$slots[col.prop]">
             <slot :name="col.prop" :row="scope.row"></slot>
           </template>
        </el-table-column>
      </template>
    </el-table>

    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @size-change="fetchData"
      @current-change="fetchData"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>