elementUI select組件默認選中效果實現(xiàn)的方法
更新時間：2019年03月25日 11:48:16 作者：努力的小聰忙
這篇文章主要介紹了elementUI select組件默認選中效果實現(xiàn)的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先，v-model的值為當(dāng)前被選中的el-option的 value 屬性值
需求：進入編輯頁面，狀態(tài)欄默認選中生效，如下顯示：
html部分代碼：
<el-form-item label="狀態(tài)">
<el-select v-model="form.status" placeholder="請選擇">
<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屬性（某一項的名字）和value屬性（某一項的具體的值），value才是我們需要的值，也是傳到后端的值，而label是展示給用戶看的值，重復(fù)一點：v-model的值為當(dāng)前被選中的el-option的 value 屬性值
options: [{
value: '1',
label: '生效'
}, {
value: '2',
label: '失效'
}],
因此，如果需要默認選中生效選項，需要把生效對應(yīng)的value賦給el-select的v-model
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue綁定class與行間樣式style的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
大文件下載,花費的時間比較長,沒有任何提示,用戶體驗很差,需要優(yōu)化,提示文件在下載中,并且顯示進度百分比,下面小編給大家?guī)砹薞ue項目實現(xiàn)文件下載進度條功能,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了基于mpvue的簡單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了LogicFlow插件使用前準備詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以參考一下2024-01-01
Vue Router 是 Vue.js 官方的路由管理器。這篇文章主要介紹了詳解vue-router傳參的兩種方式,需要的朋友可以參考下2018-09-09
解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue代碼分割的實現(xiàn)(codesplit)，做了代碼分割后，會將代碼分離到不同的bundle中，然后進行按需加載這些文件，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中的文本空格占位符說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06