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/