Vuei18n 在数组中使用

最新推荐文章于 2025-06-30 09:06:47 发布

傻狍子的小跟班

最新推荐文章于 2025-06-30 09:06:47 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vuei18n vue

本文链接：https://blog.youkuaiyun.com/weixin_44083426/article/details/97784244

本文介绍如何在Vue项目中使用Vuei18n进行国际化设置，特别是在html页面表单和js数组中，具体展示了在a-table组件的列配置中应用$t方法实现列标题的多语言切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuei18n 在html页面表单和js数组中使用

html的结构:

<a-table :columns="columns" :dataSource="tabledata" :pagination="false">

javascript的结构:

import moment from "moment";

const columns = [
  {
    dataIndex: "name",
    key: "name",
    title: "Project Name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "Project Status",
    dataIndex: "status",
    key: "status"
  }
];
export default {
  name: "Myproject",
  components: { Detail, Paydetail },
  data() {
    return {columns:columns}
    }
   }

数组一开始是定义在data数据外面的,添加$t(‘meunitem.project_name’)不生效,然后把数组定义在了data里面:

  data() {
    return {
      columns:[
        {
          dataIndex: "name",
          key: "name",
          title: this.$t('meunitem.project_name'),
          scopedSlots: { customRender: "name" }
        },
        {
          title: "Project Status",
          dataIndex: "status",
          key: "status"
        }
      ]
     }
    }