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