Bootstrap

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

<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
  }
]

;