33 lines
1.4 KiB
Vue
33 lines
1.4 KiB
Vue
|
<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>
|