antd-vue 列表(table、list)自定义缺省ui

一、antd-vue官方给出的空数据的参数

在这里插入图片描述
也给出了例子,emptyText: '暂无数据'。如果你只需要改文案,按照这个方式即可。

但在实际场景中,我们不仅需要自定义文案,更希望有其他更多的自定义内容,比如缺省图

二、更多个性化设置

官方文档给的太过简洁,其实 emptyText 不仅可以传文字,也可以传组件!

也就是说你可以自定义一个缺省的组件,仍然通过 emptyText 传进去就行

看下面的例子:

1、正常封装一个Empty组件(样式自己根据需要调整)

在这里插入图片描述

2、table 组件 的 locale 参数传入

在这里插入图片描述

组件引入:

在这里插入图片描述
在这里插入图片描述

值得说的是,Empty在引入之后,是不需要在components中注册的!

来看一下对比效果,默认的:

在这里插入图片描述
自定义的:
在这里插入图片描述

list 组件也是同样的方法。有了这个方法以后,怎么自定义都可以啦~

你可能感兴趣的:(antd-vue 列表(table、list)自定义缺省ui)