ElementUI中的Empty空状态使用

最新推荐文章于 2024-06-21 09:33:42 发布

阿舒带你学编程

最新推荐文章于 2024-06-21 09:33:42 发布

阅读量1.2k

点赞数

分类专栏：前端 html 文章标签： css3 前端 css

本文链接：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代表图片的长
其它页面布局，可根据自己需要进行调整

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿舒带你学编程

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ElementUi el-table 美化暂无数据状态

柒柒兮的博客

08-05

3079

前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方正常的空值状态如下经过修改后解决方法如下 <template> <el-table border :class="{ 'table': '', 'noScrol': tableText }" > //通过slot自定义空状态 <template v-slot:empty > <p :class="{'

实习中element ui中表格组件为空数据时的样式修改

weixin_54241625的博客

07-11

1719

element ui 组件中不可能拿来就直接进行使用，大多数都是要自己根据ui来修改样式的，需求所要实现的效果如下图这里他是把表格顶栏也没有了，感觉还要判断这个数据返回回来是不是为空，为空这样显示，不为空再把表格渲染出来，感觉很麻烦，所以就退而求其次，修改表格组件的空数据样式就ok了，在全局less样式中加上背景图片就是项目中的图片进行替换就行最终实现结果...

参与评论您还未登录，请先登录后发表或查看评论

【区分vue2和vue3下的element UI Empty 空状态组件，分别详细介绍属性，事件，方法如何使用，并举例】

最新发布

xiejunlan的博客

06-21

541

在 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

2149

element-ui empty 组件源码分享

qq_37309987的博客

04-03

512

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

5883

报错信息： 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

1210

在Vue中使用Avue

小马甲

10-06

1864

Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。

element中自定义无数据或等待接口返回时slot=“empty“的用法

qq_43351249的博客

11-16

5006

<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

2441

在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】

element-ui表格数据为空，自定义图片提示

weixin_73317181的博客

08-15

2260

1、不需要自定义图片，当表格绑定的数据为空时需要显示暂无数据字样时，我们可以直接用empty-text。2、表格绑定的数据为空且需要自定义图片占位提示，如下。我们可以在表格底部列在加入自定义图片。

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

渣渣砖

08-10

1278

empty组件常见于业务开发中。

Element UI - el-table 自定义“暂无数据”插槽

牧码的博客

11-25

7491

<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

1841

可以通过在 data 中定义一个描述文字，然后将该文字赋值给 description 属性，或直接将描述文字作为字符串传递给 description 属性。可以通过在 data 中定义一个样式对象，然后将该对象赋值给 image-style 属性，或直接将样式对象作为属性值传递给 image-style 属性。可以通过在 data 中定义一个图片路径，然后将该路径赋值给 image 属性，或直接将图片路径作为字符串传递给 image 属性。事件，你可以在该事件的回调函数中实现重新加载数据的逻辑。

解决Element中el-empty不显示图片，控制台报错的问题

u011746482的专栏

03-03

6609

最近，在开发中用到了空状态组件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，经查询发现是现有的.