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

最新推荐文章于 2024-12-09 10:50:55 发布
原创 最新推荐文章于 2024-12-09 10:50:55 发布 · 675 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#anti-design-vue

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

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

gz-郭小敏
关注
Ant Design Vue - 修改＜Table＞表格组件默认的暂无数据图标（自定义表格空数据状态图片）
🏆 前端领域优质创作者
02-25 1万+
前言 修改表格组件 <Table> ，默认空数据情况下的图片，如下图所示： 解决方案 表格组件提供了 locale 属性，可利用此进行更换。 你可以 自定义图片组件，也可以直接使用框架自带的 <Empty> 空状态组件， 如下代码所示： <a-table :locale="locale" /> data() { return { locale: { emptyText: <a-empty /> } } } ...
精选资源
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 Table组件实现自定义空数据状态样式
热门推荐
草率小猿的博客
11-02 1万+
写在前面 几乎在所有的前端UI中，Table组件都有着不可或缺的作用，Table组件对于数据展示，有着天然的优势。 Ant-Design官网上，对于Table组件，有着非常详细的API和Demo，比如自带可编辑单元格、可编辑行功能，是其他部分UI中所没有的。但是对于Table组件数据为空时的渲染样式，却没有直接的文档说明。本人之前从事Vue+ElementUI进行开发，ElementUI中Table组件，可以直接通过empty-text属性，或者slot="empty"进行配置。效果如下图： Config
antd-vue 列表（table、list）自定义缺省ui
weixin_42289080的博客
03-26 2813
一、antd-vue官方给出的空数据的参数 也给出了例子，emptyText: ‘暂无数据’。如果你只需要改文案，按照这个方式即可。 但在实际场景中，我们不仅需要自定义文案，更希望有其他更多的自定义内容，比如缺省图 二、更多个性化设置 官方文档给的太过简洁，其实emptyText不仅可以传文字，也可以传组件！ 也就是说你可以自定义一个缺省的组件，仍然通过 emptyText 传进去就行 看下面的例子： 1、正常封装一个Empty组件（样式自己根据需要调整） 2、table 组件 的 locale 参数传
antd vue table 改变暂无数据文案
Sindy的博客
05-11 730
description: "无报警",
ant-design-vue@1.7.8表格自定义空状态
qq_41893686的博客
12-09 351
【代码】ant-design-vue@1.7.8表格自定义空状态。
antd :无数据状态，空白表格样式更改
qq_67095994的博客
03-13 2082
我使用了媒体查询，为了适配，也不知道对不对（目前没啥问题）。可以让图标一直居中显示。将这个插槽放在<a-table>标签中，空内容的高度和图标都可以自己设置。2.使用插槽更改样式。
精选资源
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-1.6.0.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ant-design-vue-4.2.1.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
ant-design-vue-4.2.2.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
Ant Design Vue 设置全局空数据，将全局的empty标签默认“no Data“改为“暂无数据“
m0_46550764的博客
11-16 6604
方法1:将全局的语言设置为中文，效果如下 方法2:在App.vue中重写empty标签，效果如下（此处仅修改了文字，也可以修改其他样式） 步骤： 1、在全局配置main.js中，引入ConfigProvider import ConfigProvider from "ant-design-vue"; Vue.use(ConfigProvider); 2、在App.vue中，修改ConfigProvider <template> <a-conf...
ant-design-vue的a-table组件自定义空状态
马娟的博客
02-24 5015
主要功能： 自定义table没有数据时的展示，如图 实现步骤： 1.引入ConfigProvider 2.在ConfigProvider里加入a-table并修改renderEmpty模版里的代码 完整代码： 如下 <template> <ConfigProvider> <template #renderEmpty> <a-empty :image="require('@/assets/empty.png')">
andt Table 自定义空数据样式
qq_40137978的博客
11-17 892
antd table 自定义空数据样式
antd table修改没有数据时的显示
LiuXiaodong2020的博客
11-11 3638
antd table修改没有数据时的显示 在没有数据的时候想要修改table里面的图标 使用: // js const customizeRenderEmpty = () => ( <div style={{ textAlign: 'center', padding: 30 }}> <UserAddOutlined style={{ fontSize: 30 }} /> <p>暂未绑定深库存店铺</p> &
element table empty-text使用
qq_41818075的博客
10-22 9444
1.表格为空，自定义展示内容信息 <el-table> <el-table-column label="创建时间"> </el-table-column> <div slot="empty" style="height:200px;line-height: 200px;"> <i class="el-icon-warning-ou...
antd table无内容时修改默认显示
waillyer的博客
11-26 4277
<Table columns={columns} dataSource={dataSource} pagination={false} locale={{ emptyText: '暂无数据' }} />
Vue Antdv 列表(table、list)自定义空数据状态UI
m0_61418142的博客
04-12 1081
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
React 自定义ant Table组件的暂无数据~
小考拉的博客
12-17 675
React 自定义ant Table组件的暂无数据~
ant-design-vue table组件自定义展开图标expandIcon
最新发布
05-28
在 ant-design-vue 中，`a-table` 组件提供了 `expandIcon` 属性，允许开发者自定义展开/折叠行的图标。以下是一个完整的示例和说明： ```html <a-table :columns="columns" :data-source="data" :expanded...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值