实战：vue3.0 ant-design table表头国际化i18n问题

最新推荐文章于 2025-06-11 16:29:01 发布

qingzhen568

最新推荐文章于 2025-06-11 16:29:01 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3.0 vue实战 ant-design 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43919509/article/details/122189915

vue实战同时被 3 个专栏收录

28 篇文章

订阅专栏

7 篇文章

订阅专栏

ant-design

3 篇文章

订阅专栏

本文展示了如何在Ant Design Vue的表格组件中实现表头的国际化，并自定义操作列，包括查看和编辑功能。通过使用`$t`函数进行多语言渲染，以及设置`customRender`来改变特定列的显示内容。

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

<a-table
   :columns="columns"
   :dataSource="dataSource"
   :pagination="false"
   :loading="loading"
   :scroll="{ x: 1100, y: 300 }"
 >
 	// 表头国际化设置
   <template #headerCell="{ column }">
     <template v-for="(item, index) in columns" :key="index">
       <span v-if="column.nameI18n && column.dataIndex === item.dataIndex">
       {{ $t(column.nameI18n) }}
       </span>
     </template>
   </template>
   // 操作栏
   <template #bodyCell="{ column, record }">
     <template v-if="column.dataIndex === 'operation'">
       <a-button type="link" @click="check(record)">查看</a-button>
       <a-button type="link" @click="edit(record)">编辑</a-button>
     </template>
   </template>
 </a-table>

定义的表头数据：

// nameI18n 为template中渲染的字段
// teachID 为多语言文件中设置的国际化标识
const columns = [
  {
    title: '是否启用',
    dataIndex: 'status',
    nameI18n: 'isEnable',
    customRender: (text) => {
      return text == 1 ? '启用' : '禁用'
    },
    ellipsis: true,
    width: '180px'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: 'center',
    width: 300
  }
]