場(chǎng)景
在應(yīng)用elementUI的el-select下拉框的時(shí)候，界面展示只需要文案就足夠了， 但我們傳參給后端可能需要多個(gè)字段 ,如有以下后端接口返回?cái)?shù)據(jù):
const optionsList = [
{
name: '',
id: '',
class_name:'',
class_type: '',
english_name: '',
is_default: false,
online_worker_count: 0,
time: "2022-12-26 16:30:21",
}
...
]
即需要獲取當(dāng)前選擇的name對(duì)應(yīng)的對(duì)象的所有數(shù)據(jù)
實(shí)現(xiàn)
使用element官方的屬性：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-543872.html
value-key 作為 value 唯一標(biāo)識(shí)的鍵名，綁定值為對(duì)象類(lèi)型時(shí)必填文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-543872.html
<el-form-item v-for="(workerItem, index) in form.data.worker_groups" :key="'workerGroups_'+ index"
style="margin-top: 10px">
<el-select v-model="form.data.worker_groups[index]" value-key="name" filterable clearable placeholder="請(qǐng)選擇">
<el-option
v-for="item in data.workerGroups"
:key="item.id"
:label="item.name"
:value="item">
</el-option>
</el-select>
</el-form-item>
注意點(diǎn)
- el-select的v-model綁定當(dāng)前的對(duì)象
- 不能直接綁定workerItem會(huì)報(bào)錯(cuò)，使用
form.data.worker_groups[index]索引獲取當(dāng)前對(duì)象。 - el-option的value綁定最后我們想獲取的當(dāng)前對(duì)象
- value-key的值可以和label對(duì)應(yīng)
到了這里，關(guān)于el-select獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![el-select報(bào)錯(cuò)：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；無(wú)法選中](https://imgs.yssmx.com/Uploads/2024/02/622788-1.png)
