Ant Design Vue 设置全局空数据,将全局的empty标签默认“no Data“改为“暂无数据“
方法1:将全局的语言设置为中文,效果如下方法2:在App.vue中重写empty标签,效果如下(此处仅修改了文字,也可以修改其他样式)步骤:1、在全局配置main.js中,引入ConfigProviderimport ConfigProvider from "ant-design-vue";Vue.use(ConfigProvider);2、在App.vue中,修改ConfigProvider&l
·
方法1:将全局的语言设置为中文,效果如下
方法2:在App.vue中重写empty标签,效果如下(此处仅修改了文字,也可以修改其他样式)
步骤:
1、在全局配置main.js中,引入ConfigProvider
import ConfigProvider from "ant-design-vue";
Vue.use(ConfigProvider);
2、在App.vue中,修改ConfigProvider
<template>
<a-config-provider :locale="locale">
此处的template为重写全局空状态,删去这段template即为方法1效果
<template #renderEmpty>
<a-empty description="暂无数据"></a-empty>
</template>
<div id="app">
<router-view />
</div>
</a-config-provider>
</template>
<script>
将全局的语言改成中文
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
export default {
data() {
return {
locale: zhCN
};
}
};
</script>
总结:
ConfigProvider为全局配置的一个组件,使用 Vue 的 provide / inject 特性,只需在应用外围包裹一次即可全局生效。
官方API如下:
可以使用插槽改写空状态属性,或者直接将locale属性设置为中文,都可以达到效果,可根据需要做选择。
更多推荐
已为社区贡献2条内容
所有评论(0)