<template>
  <!-- 使用从 element-plus 导入的原始表格组件 -->
  <el-original-table v-bind="$attrs">
    <!-- 遍历父组件提供的所有插槽 -->
    <!-- slotName 是插槽名, slotFn 是渲染函数 (我们这里不需要直接用它) -->
    <template v-for="slotName in Object.keys($slots)" #[slotName]="slotProps">
       <!-- 渲染父组件传入的同名插槽内容，并将原始表格传出的 slotProps 透传过去 -->
       <slot :name="slotName" v-bind="slotProps"></slot>
    </template>

    <!-- 定义自定义的 #empty 插槽 -->
    <template #empty>
      <div style="text-align: center; padding: 20px;">
        <img :src="data_empty" alt="暂无数据" style="max-width: 200px; margin-bottom: 10px;" />
      </div>
    </template>
  </el-original-table>
</template>

<script setup>
// 非常重要：因为我们在 main.js 中全局注册了 'el-table' 为这个包装组件，
// 所以在这个组件内部必须使用不同的名称来引用 Element Plus 的原始表格组件。
// 我们通过别名导入来实现这一点。
import { ElTable as ElOriginalTable } from 'element-plus';
import data_empty from '@/assets/empty_images/data_empty.png';

// 在 <script setup> 中， $attrs 和 $slots 可以直接在模板中使用
// 无需显式导入 useAttrs 或访问 this.$slots
</script>

<style scoped>
/* 您可以根据需要添加样式 */
</style>