Vue Antdv 列表(table、list)自定义空数据状态UI

最新推荐文章于 2024-03-14 17:15:24 发布
最新推荐文章于 2024-03-14 17:15:24 发布
阅读量7.8k 收藏 12
点赞数 5
分类专栏： Vue2.x Antdv 文章标签： antdv
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz00008888/article/details/114986575
版权
Vue2.x 同时被 2 个专栏收录
68 篇文章 13 订阅
订阅专栏
Antdv
14 篇文章 4 订阅
订阅专栏
  • 列表数据为空的时候，需要更换空数据状态UI，官方文档给的提示是：

image.png

  • 只能看到 locale 可以传 object，默认值 emptyText: '暂无数据'。

  • 怎么才能自定义图片跟文案呢？

    1、在列表对象上绑定 locale

    image.png

    2、自定义一个 Vue 组件，正常封装组件即可，这个组件导入到指定页面，不需要加入到 components 中声明。

    image.png

    image.png

    3、将组件直接写到 emptyText 里面作为 value，组件的传值跟正常使用一致

    image.png

  • 默认效果

    image.png

  • 自定义后

    image.png

卡尔特斯
关注
专栏目录
ant-design-vue的table组件自定义空状态
Luna
04-22 4588
场景： 如图所示，图片上半部分是表格，下半部分是另外模块的暂无数据展示。为了优化用户体验，想把表格中的图片（icon）替换为下面的图片。 解决方案： 经查知ant-design 官方提供了空状态案例，结合configProvider全局化配置就可以啦。 查文档没有发现可以调整单个表格空状态的例子，唯有全局化配置：???? <template> <a-config-provider :locale="locale"> <template #
a-table 修改默认的空状态描述
weixin_50249353的博客
10-23 880
用大括号包裹就可以使用data的变量了 多语言也一样 这样就可以改成自己想要的样式了。但是发现无法在data的a-empty标签中使用v-bind 试了半天需要这样来写。这里可以成功修改样式 但是图片的话不是simple 了 是default。意思是修改了local属性中的emptyText就可以改变内容了。但是这样写的话 就不显示图片了 可以使用a-empty 来自定义。simple图片和暂无数据样式。可以查看empty 有两种图片。
ant-design-vue的a-table组件自定义空状态
马娟的博客
02-24 4330
主要功能： 自定义table没有数据时的展示，如图 实现步骤： 1.引入ConfigProvider 2.在ConfigProvider里加入a-table并修改renderEmpty模版里的代码 完整代码： 如下 <template> <ConfigProvider> <template #renderEmpty> <a-empty :image="require('@/assets/empty.png')">
Ant-Design Table组件实现自定义空数据状态样式
热门推荐
草率小猿的博客
11-02 1万+
写在前面 几乎在所有的前端UI中，Table组件都有着不可或缺的作用，Table组件对于数据展示，有着天然的优势。 Ant-Design官网上，对于Table组件，有着非常详细的API和Demo，比如自带可编辑单元格、可编辑行功能，是其他部分UI中所没有的。但是对于Table组件数据为空时的渲染样式，却没有直接的文档说明。本人之前从事Vue+ElementUI进行开发，ElementUI中Table组件，可以直接通过empty-text属性，或者slot="empty"进行配置。效果如下图： Config
ant design table 表格空白
speechless fish 的博客
05-18 2011
据我查找，情况可能有如下几点: 1、table设置了tableLayout:fixed，导致每个格子的css的color:transparent改变了原来的颜色 2、版本的不同，ant 版本的高低缓存问题，建议重启电脑，然后重新删除node_modules，再下载，可能和package.json、package-lock.json、和运行编译缓存的差异影起 ...
ant-design-vue的a-table组件空状态滚动条位置移动（亲测可用）
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-13 1203
a-table组件，判断当前table的表格数据是否为空，为空添加当前的类名即可。
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
Vue开发给iView的Table组件添加自定义表头筛选
mrgao的博客
04-11 6581
效果图: iview的默认table组件不支持 表头输入框筛选，官方地址 此处默认您有了一定的vue开发基础。 套用iview官方的例子： //显示表格的例子 <template> <Table border :columns="columns7" :data="data6"></Table> </template> <script&gt...
#15封装vue3+el-table表格数据请求函数
最新发布
weixin_42718399的博客
03-14 2094
封装vue3+el-table表格数据请求函数，简单易懂，开箱即用。
Ant Design Vue - 修改＜Table＞表格组件默认的暂无数据图标（自定义表格空数据状态图片）
weixin_62733705的博客
05-25 2043
Ant Design Vue - 修改＜Table＞表格组件 - 自定义表格空数据状态图片
vue3 antdesign表格如何自定义“暂无数据”图片
ScumStudy的博客
12-14 1101
【代码】vue3 antdesign表格如何自定义“暂无数据”图片。
【antdv】notFoundContent当下拉列表为空时显示的内容
Owen的博客
05-12 852
今天发现一个可爱的属性，当下拉框没有数据的时候，可以展示提示文字。
Vue3空状态（Empty）
Mr Dear的博客
04-17 2472
空状态时的展示占位图，支持：两种预置风格的图片；自定义图片链接；使用插槽自定义图片；自定义描述文本和文本样式；自定义底部内容；总之，功能丰富，简单易用😁😁
antd-vue 列表（table、list）自定义缺省ui
weixin_42289080的博客
03-26 2422
一、antd-vue官方给出的空数据的参数 也给出了例子，emptyText: ‘暂无数据’。如果你只需要改文案，按照这个方式即可。 但在实际场景中，我们不仅需要自定义文案，更希望有其他更多的自定义内容，比如缺省图 二、更多个性化设置 官方文档给的太过简洁，其实emptyText不仅可以传文字，也可以传组件！ 也就是说你可以自定义一个缺省的组件，仍然通过 emptyText 传进去就行 看下面的例子： 1、正常封装一个Empty组件（样式自己根据需要调整） 2、table 组件 的 locale 参数传
#vue# 纯手写“页面数据为空时，显示空状态图片”
ZHENGCHUNJUN的博客
07-20 3467
需求：在我们的页面，没有显示任何数据时，显示图片以及提示语 效果： 后端接口数据 思路： （1）只需要在页面里面加入一个div，当页面里面的数据为0时，就用v-show展示出来（就是当页面没有数据的时候，就显示这个图片） （注意，这个空状态的div需要放在具体呈现的位置进行排版） //（2）设置一个变量，例如totalNum ，在js的data板块先把变量totalNum设置为0，就是先不展示出来 （3）最后一步，就是让我们的变量totalNum 全等于 0（就是没有数据...
ant design vue 列表List
jduksa的博客
10-12 2830
<a-list item-layout="horizontal" :data-source="data"> <a-list-item slot="renderItem" slot-scope="item"> <a-list-item-meta :description="item.content" > <a slot="title" href="">{{ item.title }}</a&g
修改antdv-vue中table无数据显示的默认内容
qq_43405603的博客
12-30 4219
a-table行间加：locale="tablenodata" data加： tablenodata:{emptyText:()=>( <div><div><img src="/static/images/utils/nodata.png" width="200" /></div><div>暂无数据</div></div> )} ...
Vue+Element-UI封装table使用：解决表头render函数问题
"这篇文档主要介绍了如何在Vue项目中结合Element-UI库使用表格（table）功能，并且解决Element-UI不支持直接在表头内写render函数的问题。作者通过二次封装element-ui的table组件来实现自定义渲染功能。文档包括了...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值