需求如下
表單添加項(xiàng)的某個選擇器的選項(xiàng),大致是這個格式锨推,而且是可維護(hù)的,是從后端請求并返回的:
//存value的值
options: [
{
id:1,label: "設(shè)施",value: 0,
},
{
id:2,label: "大田", value: 1,
},
{
id:3,label: "養(yǎng)殖地",value: 2,
},
{
id:4,label: "塘口",value: 3,
},
],
表單列表的顯示是要顯示label公壤,如下:
//獲取的表單列表,其中breedType為上面選擇器的值
list:[
{
id:1000,breedName: "品種名稱1",breedType: 0,
},
{
id:1001,breedName: "品種名稱2", breedType: 1,
},
...
]
頁面展示的內(nèi)容
第1行:品種名稱1换可,設(shè)施
第2行:品種名稱2,大田
這個時候也不方便用filter厦幅,因?yàn)檫x項(xiàng)是異步獲取的
Map數(shù)據(jù)類型在這里的用法
//封裝的axios請求方法
DictionaryApi.getList(傳給后臺獲取列表的值).then(res=>{
//中間省略的一些內(nèi)容沾鳄,就假設(shè)res是獲取的列表,格式同上面的options
let list = new Map()
res.forEach(item=>{
list.set(
item.value,
item.label
)
})
this.options1 = list
這樣option1就是我們最后處理完的數(shù)據(jù)
頁面上(此處ui框架是element):
//使用了Map數(shù)據(jù)類型自帶的get方法确憨,通過鍵獲得值
<el-table-column label="品種類型">
<template v-if="options1" slot-scope="scope">
{{ options1.get(scope.row.breedType) }}
</template>
</el-table-column>
優(yōu)點(diǎn)
Map是一組鍵值對的結(jié)構(gòu)译荞,具有極快的查找速度。