vue?element?ui?Select選擇器如何設(shè)置默認狀態(tài)
element ui Select選擇器設(shè)置默認狀態(tài)
效果圖:

將系列狀態(tài)默認為上架狀態(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//頁面加載進來的時候設(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)文章
詳解關(guān)于element el-button使用$attrs的一個注意要點
這篇文章主要介紹了詳解關(guān)于element el-button使用$attrs的一個注意要點,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Template?ref在Vue3中的實現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實現(xiàn)將圖像文件轉(zhuǎn)換為base64,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-02-02
vue中g(shù)etters的使用與四個map方法的使用方式
這篇文章主要介紹了vue中g(shù)etters的使用與四個map方法的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
創(chuàng)建項目及包管理yarn create vite源碼學習
這篇文章主要為大家介紹了創(chuàng)建項目及包管理yarn create vite源碼學習分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09
Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05
vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)
這篇文章主要介紹了vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01
Vue2實現(xiàn)未登錄攔截頁面功能的基本步驟和示例代碼
在Vue 2中實現(xiàn)未登錄攔截頁面功能,通常可以通過路由守衛(wèi)和全局前置守衛(wèi)來完成,以下是一個基本的實現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個簡單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04

