elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法
更新時(shí)間：2019年03月25日 11:48:16 作者：努力的小聰忙
這篇文章主要介紹了elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先，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是展示給用戶看的值，重復(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)文章
這篇文章主要介紹了vue綁定class與行間樣式style的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能
大文件下載,花費(fèi)的時(shí)間比較長(zhǎng),沒有任何提示,用戶體驗(yàn)很差,需要優(yōu)化,提示文件在下載中,并且顯示進(jìn)度百分比,下面小編給大家?guī)砹薞ue項(xiàng)目實(shí)現(xiàn)文件下載進(jìn)度條功能,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解
這篇文章主要介紹了基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了LogicFlow插件使用前準(zhǔn)備詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下2024-01-01
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
vue代碼分割的實(shí)現(xiàn)(codesplit)
這篇文章主要介紹了vue代碼分割的實(shí)現(xiàn)(codesplit)，做了代碼分割后，會(huì)將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06