vue3.0 ant-design table表头国际化i18n问题
在使用vue3+i18n 开发多语言国际化的时候，table的列头名称 并不会同步更换对应语言， 而是需要你重新laod或者切换页面之后才生效，官方文档也没有涉及相关问题的解决办法。
在使用vue3+i18n 开发多语言国际化的时候，table的列头名称 并不会同步更换对应语言， 而是需要你重新laod或者切换页面之后才生效，官方文档也没有涉及相关问题的解决办法。
之前的写法
const columns = [
{
title: t('balance.date_time'),
dataIndex: 'date_time',
key: 'date_time',
width: '10%',
},
]不难看出其实就是切换语言的时候，表头的i18n全局指令变量没有被触发。
这个时候我们可以换一种思路去处理，把他交给识图view 来处理试试，我使用的是ant-design V3版本，table组件中有一个headerCell插槽，我们可以完全利用他来解决
<template>
<a-table :columns="columns" :data-source="dataSource" :loading="tableLoading">
<template #headerCell="{ column }">
<span>{{ $t(column.title) }}</span>
</template>
<template #bodyCell="{ column, record }">
</template>
</a-table>
</template>
<script>
const columns = [
{
title: 'balance.date_time',
dataIndex: 'date_time',
key: 'date_time',
width: '10%',
},
]
</script>完美解决
以上这篇vue3.0 ant-design table表头国际化i18n问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。
原创文章，作者：ECHO陈文，如若转载，请注明出处：https://www.luweipai.cn/html/1659339460/
相关推荐
-
深入理解position sticky 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）
-
vue3如何解决reactive()响应式对象初始化重新赋值
在 Vue 3 中，reactive 函数是 Composition API 的一部分，用于创建一个响应式对象。这意味着当你改变这个对象的属性时，任何依赖于这些属性的组件或计算属性都会自动更新。
-
满屏import优化方案之使用模块重导（Re-export）
在编写代码时，随着项目的扩大和功能的增加，我们往往会引入越来越多的外部库和模块，这就导致了import语句数量的激增。然而，过多的import语句不仅会使代码显得杂乱无章，还可能隐藏一些潜在的问题，如未使用的导入、导入顺序混乱等。
-
微信小程序封装公共弹窗dailog组件-UNIAPP篇
在小程序的开发过程中，会发现弹框这东西使用频率太高了，能不能封装一个公共组件呢~ 答案当然是能！！！ 开发思路借鉴了一下vant，有兴趣的同学可以，研究一下
