Element组件浅尝辄止5:Empty 空状态组件

本文介绍了ElementUI中的Empty组件如何在数据为空时提供占位提示,包括自定义图片、调整图片尺寸以及在底部添加内容的用法。
摘要由CSDN通过智能技术生成

Empty空状态组件:空状态时的占位提示。

如第一次进入当前功能模块时,数据状态为空,则展示空状态,可用到Empty组件

1.How?

<el-empty description="描述文字"></el-empty>

2.自定义图片

        通过设置 image 属性传入图片 URL。常见于业务开发中。

<el-empty image="https://sxxx.com/element/hamburger.9cf7bef6.png"></el-empty>

3.图片尺寸

        通过设置 image-size 属性来控制图片大小。

<el-empty :image-size="200"></el-empty>

4. 底部内容

        使用默认插槽可在底部插入内容。

<el-empty>
  <el-button type="primary">按钮</el-button>
</el-empty>

         上述就是Empty组件的常见用法 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值