ElementUI中的Empty空状态使用

最新推荐文章于 2024-06-21 09:33:42 发布
最新推荐文章于 2024-06-21 09:33:42 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 html 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55613022/article/details/123345267
版权
前端 同时被 2 个专栏收录
52 篇文章 6 订阅
订阅专栏
html
52 篇文章 0 订阅
订阅专栏
"本文介绍了如何在ElementUI中使用自定义的空状态组件，通过示例代码展示了如何插入图片和提示文本，以增强用户体验。关键步骤包括设置`slot="empty"`，配置图片的宽高以及提供相应的提示信息。"
摘要由CSDN通过智能技术生成

ElementUI中的Empty空状态使用

话不多说，直接贴代码

<div slot="empty">
    <div>
      <img
         src="../../assets/noQuotation.png"
         alt="暂无数据"
         width="300" 
         height="138"
    />
    </div>
    <p>查无结果，请检查订单号是否有误/p>
  </div>

在这里插入图片描述

width代表图片的宽
height代表图片的长
其它页面布局，可根据自己需要进行调整

阿舒带你学编程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUi el-table 美化暂无数据状态
柒柒兮的博客
08-05 3073
前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方 正常的空值状态如下 经过修改后 解决方法如下 <template> <el-table border :class="{ 'table': '', 'noScrol': tableText }" > //通过slot自定义空状态 <template v-slot:empty > <p :class="{'
实习中element ui中表格组件为空数据时的样式修改
weixin_54241625的博客
07-11 1708
element ui 组件中不可能拿来就直接进行使用，大多数都是要自己根据ui来修改样式的，需求所要实现的效果如下图 这里他是把表格顶栏也没有了，感觉还要判断这个数据返回回来是不是为空，为空这样显示，不为空再把表格渲染出来，感觉很麻烦，所以就退而求其次，修改表格组件的空数据样式就ok了， 在全局less样式中加上 背景图片就是项目中的图片进行替换就行 最终实现结果...
【区分vue2和vue3下的element UI Empty 空状态组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-21 538
在 Element Plus 中，虽然官方库也没有直接名为 Empty 的组件，但你可以按照 Vue 3 的 Composition API 和 Element Plus 的设计风格来实现一个类似的组件。不过，为了回答这个问题，我们可以基于 Element UI 和 Element Plus 的设计理念，以及可能的自定义 Empty 组件实现，来介绍它们可能具有的属性、事件和方法。与 Vue 2 中的自定义组件类似，但可能会使用 Vue 3 的响应式引用（ref）或计算属性（computed）。
＜el-empty＞
hulin的博客
08-01 2130
element-ui empty 组件源码分享
qq_37309987的博客
04-03 507
2.2 image-size 属性，图片大小（宽度），类型 number，无默认值。2.3 description 属性，文本描述，类型 string，无默认值。2.1 image 属性，图片地址，类型 string，无默认值。3.3 description 挂载，自定义描述文字。3.2 image 挂载，自定义图片。3、empty 组件 slot。三、empty 组件 slot。1、empty 组件页面结构。一、empty 组件页面结构。2、empty 组件属性。二、empty 组件属性。
ui组件 element 中是使用 el-empty报错
zyqgt960812的博客
12-14 5874
报错信息： Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. 报错图片 报错原因：根据报错信息提示el-empty未注册，项目中全局引用element使用，无需单独注册某个组件。 解决办法：重新安装element的版本，建议安装如下element，重新运行即可解决问题。 npm i e
elementui 的 Empty 空状态不使用图片，使用图标展示
05-24
是的，Element UI 的 Empty 空状态组件默认使用图标而不是图片来展示空状态。这样做的好处是可以减少页面加载时间和带宽占用，同时也能提高页面的渲染性能。在 Empty 组件中，可以通过设置 icon 属性来指定需要展示...
ElementUI组件的介绍
weixin_55633731的博客
06-18 1208
1.
在Vue中使用Avue
小马甲
10-06 1844
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。
element中自定义无数据或等待接口返回时slot=“empty“的用法
qq_43351249的博客
11-16 4998
<el-select v-model="form.manufacturer" placeholder="请选择" @visible-change="visibleManufacturer" > <div slot="empty" style="text-align: left;">等待数据</div> <el-option
vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
weixin_44867717的博客
05-15 2312
在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】
element-ui表格数据为空，自定义图片提示
weixin_73317181的博客
08-15 2244
1、不需要自定义图片，当表格绑定的数据为空时需要显示暂无数据字样时，我们可以直接用empty-text。2、表格绑定的数据为空且需要自定义图片占位提示，如下。我们可以在表格底部列在加入自定义图片。
Element组件浅尝辄止5：Empty 空状态组件
渣渣砖
08-10 1270
empty组件常见于业务开发中。
Element UI - el-table 自定义“暂无数据”插槽
牧码的博客
11-25 7483
<el-table> <el-table-column prop="subjectorderinfoNum" label="操作"> <template slot-scope="scope"> <el-button type="warning" @click="handleRemoveToSC(scope)">移...
uniapp使用u-empty以及其相关属性
zzx262625的博客
12-12 1801
可以通过在 data 中定义一个描述文字，然后将该文字赋值给 description 属性，或直接将描述文字作为字符串传递给 description 属性。可以通过在 data 中定义一个样式对象，然后将该对象赋值给 image-style 属性，或直接将样式对象作为属性值传递给 image-style 属性。可以通过在 data 中定义一个图片路径，然后将该路径赋值给 image 属性，或直接将图片路径作为字符串传递给 image 属性。事件，你可以在该事件的回调函数中实现重新加载数据的逻辑。
解决Element中el-empty不显示图片，控制台报错的问题
u011746482的专栏
03-03 6591
最近，在开发中用到了空状态组件el-empty，调试时发现空状态时的占位并没有显示出来，并在控制台中报错如下： [Vue warn]: Unknown custom element: <el-empty> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决办法：项目中已经全局引用了element，经查询发现是现有的.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值