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/