elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法
首先，v-model的值為當(dāng)前被選中的el-option的 value 屬性值
需求：進(jìn)入編輯頁(yè)面，狀態(tài)欄默認(rèn)選中生效，如下顯示：
html部分代碼：
<el-form-item label="狀態(tài)">
<el-select v-model="form.status" placeholder="請(qǐng)選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
data的form中定義status屬性：
再看data中options的定義，options為選擇框中所有的可選內(nèi)容，有l(wèi)abel屬性（某一項(xiàng)的名字）和value屬性（某一項(xiàng)的具體的值），value才是我們需要的值，也是傳到后端的值，而label是展示給用戶(hù)看的值，重復(fù)一點(diǎn)：v-model的值為當(dāng)前被選中的el-option的 value 屬性值
options: [{
value: '1',
label: '生效'
}, {
value: '2',
label: '失效'
}],
因此，如果需要默認(rèn)選中生效選項(xiàng)，需要把生效對(duì)應(yīng)的value賦給el-select的v-model
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue項(xiàng)目vue-cli-service啟動(dòng)報(bào)錯(cuò)失敗問(wèn)題的解決方法
前端拉取代碼后,想要運(yùn)行代碼的時(shí)候可以能遇到啟動(dòng)報(bào)錯(cuò)的問(wèn)題,這里我們只針對(duì)于vue-cli-service報(bào)錯(cuò)項(xiàng)來(lái)說(shuō),文中通過(guò)圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08
vue項(xiàng)目使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對(duì)密碼、手機(jī)號(hào)、身份證號(hào)等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國(guó)密sm3及國(guó)密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了vue-resource 攔截器使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤(pán)干擾,感興趣的朋友一起看看吧2024-09-09
vue element-ui中table合計(jì)指定列求和實(shí)例
這篇文章主要介紹了vue element-ui中table合計(jì)指定列求和實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決element-ui el-input賦值后不能編輯的問(wèn)題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue預(yù)渲染：prerender-spa-plugin生成靜態(tài)HTML與vue-meta-info更新meta
Vue.js中,prerender-spa-plugin和vue-meta-info插件的結(jié)合使用,提供了解決SEO問(wèn)題的方案,prerender-spa-plugin通過(guò)預(yù)渲染技術(shù)生成靜態(tài)HTML,而vue-meta-info則能動(dòng)態(tài)管理頁(yè)面元數(shù)據(jù),本文將探討如何使用這兩個(gè)工具優(yōu)化Vue.js項(xiàng)目的SEO表現(xiàn),包括安裝、配置及注意事項(xiàng)2024-10-10
這篇文章主要介紹了在項(xiàng)目vue中使用echarts的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue axios post發(fā)送復(fù)雜對(duì)象問(wèn)題
現(xiàn)在vue項(xiàng)目中，一般使用axios發(fā)送請(qǐng)求去后臺(tái)拉取數(shù)據(jù)。這篇文章主要介紹了vue axios post發(fā)送復(fù)雜對(duì)象的一點(diǎn)思考,需要的朋友可以參考下2019-06-06
使用Webstorm調(diào)試Vue代碼詳細(xì)圖文教程
WebStorm是一款優(yōu)秀的前端開(kāi)發(fā)IDE,之前一直可以調(diào)試Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于使用Webstorm調(diào)試Vue代碼的詳細(xì)圖文教程,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05