Menu
Empty component for placeholder hints in empty states. Invoke when user needs to display empty data states, no results found, or placeholder content.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
Based on SOC occupation classification
| name | el-empty |
| description | Empty component for placeholder hints in empty states. Invoke when user needs to display empty data states, no results found, or placeholder content. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Empty component provides placeholder hints for empty states with customizable images and content.
<template>
<el-empty />
</template>
<template>
<el-empty image="https://example.com/empty.png" />
</template>
<template>
<el-empty :image-size="200" />
</template>
<template>
<el-empty>
<el-button type="primary">Button</el-button>
</el-empty>
</template>
<template>
<el-empty description="No data found">
<el-button type="primary">Add Data</el-button>
</el-empty>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| image | Image URL | string | '' |
| image-size | Image size (width) | number | — |
| description | Description text | string | '' |
| Name | Description |
|---|---|
| default | Content as bottom content |
| image | Content as image |
| description | Content as description |
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name" />
<template #empty>
<el-empty description="No data available">
<el-button type="primary" @click="fetchData">Refresh</el-button>
</el-empty>
</template>
</el-table>
</template>
<template>
<el-empty>
<template #image>
<svg viewBox="0 0 100 100">
<!-- Custom SVG -->
</svg>
</template>
</el-empty>
</template>