vue-element的select下拉框賦值實(shí)例
vue-element的select下拉框賦值
當(dāng)返回值是對(duì)象數(shù)組的時(shí)候
<template> <el-select v-model="value" placeholder="請(qǐng)選擇"> <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: '選項(xiàng)1', label: '黃金糕' }, { value: '選項(xiàng)2', label: '雙皮奶' }, { value: '選項(xiàng)3', label: '蚵仔煎' }, { value: '選項(xiàng)4', label: '龍須面' }, { value: '選項(xiàng)5', label: '北京烤鴨' }], value: '' } } } </script>
當(dāng)返回值是字符串?dāng)?shù)組的時(shí)候
<template> <el-select v-model="value" placeholder="請(qǐng)選擇"> <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="請(qǐng)選擇" 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)過這個(gè)樣的賦值之后,在頁(yè)面選擇下拉數(shù)據(jù)的時(shí)候無法選中(其實(shí)已經(jīng)更改,只是頁(yè)面沒有實(shí)時(shí)刷新)
在change事件里用這個(gè)方法
?selectChange(){ ? ? this.$forceUpdate() ? },
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+webpack項(xiàng)目基礎(chǔ)配置教程
這篇文章主要介紹了Vue+webpack項(xiàng)目基礎(chǔ)配置教程,需要的朋友可以參考下2018-02-02五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08如何使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理
最近在做一個(gè)文件夾管理的功能,要實(shí)現(xiàn)一個(gè)樹狀的拖拽文件夾面板,里面包含兩種元素,文件夾以及文件,這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實(shí)現(xiàn)一個(gè)拖拽文件夾管理?,需要的朋友可以參考下2023-09-09Vue動(dòng)態(tài)控制input的disabled屬性的方法
這篇文章主要介紹了Vue動(dòng)態(tài)控制input的disabled屬性的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06VueCLI通過process.env配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07