vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)
更新時(shí)間：2023年10月08日 16:19:34 作者：阿wei程序媛
這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
element ui Select選擇器設(shè)置默認(rèn)狀態(tài)
效果圖：
將系列狀態(tài)默認(rèn)為上架狀態(tài)。
代碼實(shí)現(xiàn)
1.HTML
<el-select v-model="queryParams.status" clearable placeholder="請(qǐng)選擇狀態(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//頁(yè)面加載進(jìn)來(lái)的時(shí)候設(shè)置
},以上代碼就可以實(shí)現(xiàn)其功能
element ui中select選擇器的label和value
<el-table-column prop="componentType" label="組件類(lèi)型" width="200px"> <template #default="scope"> <el-select @change="xiala(scope.row.componentType, scope.$index)" v-model="scope.row.componentType" name="scope.row.componentType" placeholder="請(qǐng)選擇" :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控制用戶看到的選項(xiàng)
value控制傳給后臺(tái)的字段
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解關(guān)于element el-button使用$attrs的一個(gè)注意要點(diǎn)
這篇文章主要介紹了詳解關(guān)于element el-button使用$attrs的一個(gè)注意要點(diǎn),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Template?ref在Vue3中的實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02
vue中g(shù)etters的使用與四個(gè)map方法的使用方式
這篇文章主要介紹了vue中g(shù)etters的使用與四個(gè)map方法的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)
這篇文章主要為大家介紹了創(chuàng)建項(xiàng)目及包管理yarn create vite源碼學(xué)習(xí)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了如何使用 Vue.js 和純 JavaScript 構(gòu)建 Bootstrap 組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解)
這篇文章主要介紹了vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通?？梢酝ㄟ^(guò)路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
雙Token機(jī)制是一種增強(qiáng)身份驗(yàn)證安全性和提升用戶體驗(yàn)的技術(shù)方案,本文主要介紹了vue中使用雙token機(jī)制,具有一定的參考價(jià)值,感興趣的可以了解一下2025-04-04