需求如下
表单添加项的某个选择器的选项,大致是这个格式,而且是可维护的,是从后端请求并返回的:
//存value的值
options: [
{
id:1,label: "设施",value: 0,
},
{
id:2,label: "大田", value: 1,
},
{
id:3,label: "养殖地",value: 2,
},
{
id:4,label: "塘口",value: 3,
},
],
表单列表的显示是要显示label,如下:
//获取的表单列表,其中breedType为上面选择器的值
list:[
{
id:1000,breedName: "品种名称1",breedType: 0,
},
{
id:1001,breedName: "品种名称2", breedType: 1,
},
...
]
页面展示的内容
第1行:品种名称1,设施
第2行:品种名称2,大田
这个时候也不方便用filter,因为选项是异步获取的
Map数据类型在这里的用法
//封装的axios请求方法
DictionaryApi.getList(传给后台获取列表的值).then(res=>{
//中间省略的一些内容,就假设res是获取的列表,格式同上面的options
let list = new Map()
res.forEach(item=>{
list.set(
item.value,
item.label
)
})
this.options1 = list
这样option1就是我们最后处理完的数据
页面上(此处ui框架是element):
//使用了Map数据类型自带的get方法,通过键获得值
<el-table-column label="品种类型">
<template v-if="options1" slot-scope="scope">
{{ options1.get(scope.row.breedType) }}
</template>
</el-table-column>
优点
Map是一组键值对的结构,具有极快的查找速度。