SuperAPI AI 工具集

el-empty

前端与建站

查看项目

更新于 10-15 23:32

技能介绍

用途:el-empty 是 Element Plus 提供的空状态组件,用于在数据为空、搜索无结果、占位内容或错误状态等场景下展示提示信息。

主要能力:支持通过 image 属性设置图片 URL,通过 image-size 设置图片宽度,通过 description 设置描述文字;提供 default、image、description 三个插槽,可分别自定义底部内容、图片和描述。

基本用法:直接使用 <el-empty /> 即可渲染默认空状态。自定义图片:<el-empty image="https://example.com/empty.png" />。设置图片尺寸:<el-empty :image-size="200" />。底部内容:在默认插槽中放置按钮等元素,如 <el-empty><el-button type="primary">Button</el-button></el-empty>。自定义描述:<el-empty description="No data found">。

常见模式:在 el-table 的 #empty 插槽中嵌入 el-empty,实现表格空数据提示,并可附带刷新按钮;也可通过 image 插槽传入自定义 SVG。

最佳实践:空状态中提供可操作按钮,使用描述性文案,并根据上下文调整图片尺寸。

限制:资料未提供收费、平台兼容性等额外信息,暂未提供。