AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2023-08-01 1509
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue Antdv 列表(table、list)自定义空数据状态UI
  • 列表数据为空的时候，需要更换空数据状态UI，官方文档给的提示是：

  • 只能看到 locale 可以传 object，默认值 emptyText: '暂无数据'。
  • 怎么才能自定义图片跟文案呢？
    1、在列表对象上绑定 locale

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


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

  • 默认效果

  • 自定义后

文章标签：
JavaScript
卡尔特斯
目录
相关文章
34789737
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
927 17
2G冲浪词条
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法，主要包括三部分：1）使用`Collections.addAll()`方法将数组转为列表，适用于引用类型，效率较高；2）通过`new ArrayList<>()`构造器结合`Arrays.asList()`实现类似功能；3）利用JDK8的`Stream`流式计算，支持基本数据类型数组的转换。此外，还详细讲解了列表转数组的方法，如借助`Stream`实现不同类型数组间的转换，并附带代码示例与执行结果，帮助读者深入理解两种数据结构的互转技巧。
2G冲浪词条
1199 1
Java 中数组Array和列表List的转换
theMuseCatcher
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库，包含丰富的 UI 组件和常用工具函数，并且持续不断维护更新中。另外，组件库全量使用 TypeScript，支持自动按需引入和 Tree Shaking 等，能够显著提升开发效率，降低开发成本。
theMuseCatcher
987 5
Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）
小宋1021
|
SQL JavaScript 前端开发
Vue实现动态数据透视表（交叉表）
Vue实现动态数据透视表（交叉表）
小宋1021
754 13
34789737
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
727 0
蓝易云
|
数据挖掘 大数据 数据处理
python--列表list切分（超详细）
通过这些思维导图和分析说明表，您可以更直观地理解Python列表切分的概念、用法和实际应用。希望本文能帮助您更高效地使用Python进行数据处理和分析。
蓝易云
792 14
overmind1980
|
C语言 Python
[oeasy]python054_python有哪些关键字_keyword_list_列表_reserved_words
本文介绍了Python的关键字列表及其使用规则。通过回顾`hello world`示例，解释了Python中的标识符命名规则，并探讨了关键字如`if`、`for`、`in`等不能作为变量名的原因。最后，通过`import keyword`和`print(keyword.kwlist)`展示了Python的所有关键字，并总结了关键字不能用作标识符的规则。
overmind1980
509 9
蓝易云
|
数据挖掘 大数据 数据处理
python--列表list切分（超详细）
通过这些思维导图和分析说明表，您可以更直观地理解Python列表切分的概念、用法和实际应用。希望本文能帮助您更高效地使用Python进行数据处理和分析。
蓝易云
1748 10
游客lijmi4663rgsa
|
JavaScript 前端开发 API
管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器，是不是很棒？不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
949 0

热门文章

最新文章

  • 1
    vue仿微信界面聊天室项目|vue聊天案例
  • 2
    React如何实现状态自动保存（vue中的keep-alive）
  • 3
    【三十天精通Vue 3】第十二天 Vue 3 的函数式组件详解（过滤器已废弃）
  • 4
    Vue.js - 单页面 SPA ，IOS 端页面跳转后调用微信 JSSDK 时报错： "invalid signature" 解决方案
  • 5
    vue v-for循环渲染完毕后执行方法
  • 6
    【VUE异常】el-popconfirm失效，@confirm事件不生效，点击没有任何反应，刷新页面才能点击
  • 7
    关于维护vue3的响应式的那些事：unref、toRef、toRefs、toRaw、toValue
  • 8
    在Vue 3项目中引入Pinia进行状态管理并持久化存储
  • 9
    Docker实战 | 第三篇：Docker安装Nginx，实现基于vue-element-admin框架构建的项目线上部署
  • 10
    如何在 vue3 中使用 jsx/tsx?（上）
  • 1
    （Python基础）新时代语言！一起学习Python吧！（二）：字符编码由来；Python字符串、字符串格式化；list集合和tuple元组区别
    484
  • 2
    【Redis】常用数据结构之List篇：从常用命令到典型使用场景
    963
  • 3
    Java 学习路线 35 掌握 List 集合从入门到精通的 List 集合核心知识
    856
  • 4
    Java List 集合结合 Java 17 新特性与现代开发实践的深度解析及实战指南 Java List 集合
    662
  • 5
    Java List 复制：浅拷贝与深拷贝方法及区别
    1390
  • 6
    vector与list的简单介绍
    457
  • 7
    Python错误 - 'list' object is not callable 的问题定位与解决
    1896
  • 8
    Java 中数组Array和列表List的转换
    1199
  • 9
    使用OCR库Pix2Text执行p2t.recognize()时出现list index out of range的错误信息（附有Pix2Text识别图片内容和laTex公式的代码）
    642
  • 10
    【Azure Blob】操作Blob之分页List Blob一致性、索引时延及Tag支持问题解答
    398

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Fusion Design - 企业级UI解决方案揭秘
  • Vue.js在前端服务化上的实践与探索
  • 使用TensorFlow搭建智能开发系统自动生成App UI
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！