【ant-design】Table如何设置Empty文案并保留图标

于 2024-09-06 10:21:00 发布
阅读量260 收藏
点赞数 2
文章标签： anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39570717/article/details/141952585
版权

如果只设置了文案，那么为空的时候，并不会有图标

这时候我们可以设置emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={"没有数据"}/> 即可保留图标

gz-郭小敏
关注
Vue Antdv 列表(table、list)自定义空数据状态UI
m0_61418142的博客
04-12 698
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
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
antd :无数据状态，空白表格样式更改
qq_67095994的博客
03-13 1264
我使用了媒体查询，为了适配，也不知道对不对（目前没啥问题）。可以让图标一直居中显示。将这个插槽放在<a-table>标签中，空内容的高度和图标都可以自己设置。2.使用插槽更改样式。
antd vue table 改变暂无数据文案
最新发布
Sindy的博客
05-11 382
description: "无报警",
antd table无内容时修改默认显示
waillyer的博客
11-26 3860
<Table columns={columns} dataSource={dataSource} pagination={false} locale={{ emptyText: '暂无数据' }} />
av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件.zip
04-02
Ant Design Vue 是一个流行的前端 UI 库，它基于 Ant Design 设计系统，并为 Vue.js 提供了一套丰富的可复用组件。在这个场景中，我们关注的是 "av-table"，这是一个针对 Ant Design Vue 的 a-table 组件进行封装的...
ant-design-dark-theme:Ant Ant Design的深色主题变量
05-07
$ npm install @ant-design/dark-theme 用法 import darkTheme from '@ant-design/dark-theme' ; // webpack.config.js: less-loader { loader : 'less-loader' , options : { modifyVars : darkTheme , } , } ,...
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
ant-design-vue 实现表格内部字段验证功能
10-15
总结以上内容，我们在ant-design-vue中实现表格内部字段验证功能时，需要利用a-table、a-form-item、a-input等组件，并通过JavaScript代码实现自定义的验证逻辑。这不仅提高了表单数据的准确性，也增强了用户操作的...
React 自定义ant Table组件的暂无数据~
小考拉的博客
12-17 568
React 自定义ant Table组件的暂无数据~
vue3 antd table组件无数据时,用locale属性自定义缺省图
pcqiong的博客
08-23 1385
提示：vue3 antd table组件无数据时,用locale属性自定义缺省图官网 使用locale 默认文案设置emptyText 是支持组件的，在vue2中可以直接在data中定义，vue3+vite 定义会报错，这个时候可以用h()函数来解决。
Ext设置emptyText
IT382566697的专栏
08-02 330
[code="js"]var extAddress=Ext.getCmp("Address"); if(Ext.isEmpty(proAdress)){ extAddress.emptyText='请输入XXXXXX'; extAddress.setRawValue(extAddress.emptyText); ...
antd table修改没有数据时的显示
LiuXiaodong2020的博客
11-11 3030
antd table修改没有数据时的显示 在没有数据的时候想要修改table里面的图标 使用: // js const customizeRenderEmpty = () => ( <div style={{ textAlign: 'center', padding: 30 }}> <UserAddOutlined style={{ fontSize: 30 }} /> <p>暂未绑定深库存店铺</p> &
a-table 修改默认的空状态描述
weixin_50249353的博客
10-23 918
用大括号包裹就可以使用data的变量了 多语言也一样 这样就可以改成自己想要的样式了。但是发现无法在data的a-empty标签中使用v-bind 试了半天需要这样来写。这里可以成功修改样式 但是图片的话不是simple 了 是default。意思是修改了local属性中的emptyText就可以改变内容了。但是这样写的话 就不显示图片了 可以使用a-empty 来自定义。simple图片和暂无数据样式。可以查看empty 有两种图片。
vant组件使用,van-empty自定义图片, 本地图片不显示
Hubery96的博客
11-14 826
需要使用require引入本地图片,但是使用编辑器直接生成的地址是没有图片后缀的,此时需要加入图片后缀才能显示;
Antd中table的简单封装及render的使用
热门推荐
qq_45799465的博客
07-12 1万+
一、antd ui中 table组件的 render函数的使用以及简单封装 二、antd 中table表格内td内容的折行处理。 三、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容
ant修改文件中的内容
lizeyang的专栏
04-22 9806
ant可以帮我们做很多事情，当然也包括，为我们修改文件中的指定字符串。 主要有以下两个方法： 一、replace命令 例子： 作用： 可以将test2.html中的字符串a,替换成test 二、replaceregexp命令 上面的replace命令用起来很简单，但没有办法做正则匹配，如果要替换的字符串，是需要用正则来描述的，可以用replaceregexp 例子：
@ant-design/pro-components 和@ant-design/pro-protable的区别
06-26
@ant-design/pro-components 和@ant-design/pro-table都是Ant Design Pro中的组件库，但它们的定位和功能略有不同。 @ant-design/pro-components是Ant Design Pro中的基础组件库，包含了一些常用的UI组件，如按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值