vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)
更新時間:2023年10月08日 16:19:34 作者:阿wei程序媛
這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,
element ui Select選擇器設(shè)置默認(rèn)狀態(tài)
效果圖:
將系列狀態(tài)默認(rèn)為上架狀態(tài)。
代碼實現(xiàn)
1.HTML
<el-select v-model="queryParams.status" clearable placeholder="請選擇狀態(tài)"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
2.js
data(){ return { editBoxShow:false, queryParams:{ cateName:'', sortIndex:"", status:"", }, options: [ { value: 1, label: '上架' }, { value: 2, label: '下架' }], } }, mounted() { this.queryParams.status=1//頁面加載進(jìn)來的時候設(shè)置 },
以上代碼就可以實現(xiàn)其功能
element ui中select選擇器的label和value
<el-table-column prop="componentType" label="組件類型" width="200px"> <template #default="scope"> <el-select @change="xiala(scope.row.componentType, scope.$index)" v-model="scope.row.componentType" name="scope.row.componentType" placeholder="請選擇" :disabled="!scope.row.isEdit" :clearable="false" :multiple="false" :filterable="false"> <el-option v-for="item in selectdata.list" :key="item.key" :value="item.key" :????????????????????????label="item.label"> </el-option> </el-select> </template> </el-table-column>
label控制用戶看到的選項
value控制傳給后臺的字段
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
mui-player自定義底部導(dǎo)航在vue項目中顯示不出來的解決
這篇文章主要介紹了mui-player自定義底部導(dǎo)航在vue項目中顯示不出來的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化
這篇文章主要介紹了詳解vue-cli之webpack3構(gòu)建全面提速優(yōu)化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持
本篇文章主要介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持,非常具有實用價值,需要的朋友可以參考下2017-10-10vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09