后端返回字典数据:const dict = [ {code:1,value:'适用对象1'}, {code:2,value:'适用对象2'} ]; 使用ant design columns computed customrendery实现列表中显示对应的字典中文
时间: 2024-02-16 16:04:07 浏览: 171
假设你已经拿到了后端返回的字典数据,可以按照以下步骤来使用 Ant Design 的 Table 组件的 columns 属性及 computed 和 customRender 方法来实现列表中显示对应的字典中文:
1. 在你的 Vue 组件中导入 Table 组件:
```
import { Table } from 'ant-design-vue';
```
2. 在组件中定义 columns 数组,其中 key 和 dataIndex 属性与你的数据源对应:
```
const columns = [
{
title: '编码',
dataIndex: 'code',
key: 'code'
},
{
title: '名称',
dataIndex: 'value',
key: 'value',
customRender: (text, record, index) => {
// 在这里使用 computed 方法将字典编码转换成中文名称
const dictMap = {
1: '适用对象1',
2: '适用对象2'
};
return dictMap[record.code];
}
}
];
```
3. 在模板中使用 Table 组件并绑定 columns 和 dataSource 属性:
```
<Table :columns="columns" :dataSource="dict" />
```
其中,dict 为后端返回的字典数组,可以在组件中通过 props 来接收。
阅读全文