vue-element的select下拉框賦值實例
更新時間:2022年03月31日 15:03:22 作者:前端王小婷
這篇文章主要介紹了vue-element的select下拉框賦值實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue-element的select下拉框賦值
當(dāng)返回值是對象數(shù)組的時候
<template> <el-select v-model="value" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> <script> export default { data() { return { options: [{ value: '選項1', label: '黃金糕' }, { value: '選項2', label: '雙皮奶' }, { value: '選項3', label: '蚵仔煎' }, { value: '選項4', label: '龍須面' }, { value: '選項5', label: '北京烤鴨' }], value: '' } } } </script>
當(dāng)返回值是字符串?dāng)?shù)組的時候
<template> <el-select v-model="value" placeholder="請選擇"> <el-option v-for="item in options" :key="item" :value="item"> </el-option> </el-select> </template> <script> export default { data() { return { options: [ '黃金', '白銀', '鉑金', '鉆石', ], value: '' } } } </script>
vue+elementUi select框賦值后無法選值
body結(jié)構(gòu)
<el-form-item label="商品種類" class="FormInputClass"> ? <el-select v-model="adminSaveParam.prodClass" clearable placeholder="請選擇" size="mini" class="formInput" @change="selectChange"> ? ? <el-option ? ? ? v-for="item in prodClass" ? ? ? :key="item.value" ? ? ? :label="item.label" ? ? ? :value="item.value"> ? ? </el-option> ? </el-select> </el-form-item>
賦值
if (supplier.isVmi === "Y") { ? ? ? ? ? ? ? this.adminSaveParam.prodClass = "VMI"; ? ? ? ? ? ? } else if (supplier.isVmi === "N") { ? ? ? ? ? ? ? this.adminSaveParam.prodClass = "physical"; ? ? ? ? ? ? } ? ? ? ? ? }
經(jīng)過這個樣的賦值之后,在頁面選擇下拉數(shù)據(jù)的時候無法選中(其實已經(jīng)更改,只是頁面沒有實時刷新)
在change事件里用這個方法
?selectChange(){ ? ? this.$forceUpdate() ? },
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
如何使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理
最近在做一個文件夾管理的功能,要實現(xiàn)一個樹狀的拖拽文件夾面板,里面包含兩種元素,文件夾以及文件,這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理?,需要的朋友可以參考下2023-09-09Vue動態(tài)控制input的disabled屬性的方法
這篇文章主要介紹了Vue動態(tài)控制input的disabled屬性的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06VueCLI通過process.env配置環(huán)境變量的實現(xiàn)
本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07