關于el-select組件設置默認值的實現(xiàn)方式

更新時間：2022年09月02日 08:49:33 作者：官方哈哈

這篇文章主要介紹了關于el-select組件設置默認值的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-select組件設置默認值問題

最近寫項目的時候遇到將el-select組件設置默認值需求，通過查閱資料發(fā)現(xiàn)很多是使用v-model來實現(xiàn)的，但是只用v-model可能會有一些小小的問題。

因此根據(jù)他們的進行改變了一下

實現(xiàn)方式 el-select組件：

? ?<el-select v-model="templateValue" placeholder="請選擇模板" @change="selectTm">
? ? <el-option
? ? ? v-for="item in templateData"
? ? ? :key="item.id"
? ? ? :label="item.print_name"
? ? ? :value="item.id">
? ? </el-option>
? </el-select>

data屬性：

? ?templateIdentify:true,
? ?tmId:"",
? ?fileName:'沒有任何文件',//文件名

這里將templateValue的值賦值為數(shù)組的第一個內容。其次在select中添加@change="selectTm"事件，這個事件會傳入用戶選擇的id，然后將這個id賦值給tmId

有的小伙伴會問，如果用戶沒有做出選擇，那么tmId就為空字符串了。并且選擇器會不會永遠是數(shù)組的第一個內容，不會的我們用v-model進行綁定了，用戶選擇的內容會實時顯示在選擇器上。因此看下面一段代碼

created(){
?? ?templateValue:this.templateData[0].print_name,
?? ?this.init()
},
methods:{
?selectTm(currentValue) {
? ? ? this.tmId = currentValue;
? ? },
?? ?init(){
?? ??? ?if(this.templateValue.length>0){
?? ??? ? ? ?this.tmId=this.templateData[0].id
?? ??? ? ?}
?? ??? ?}
}

用來判斷用戶是否做出選擇了，如果沒有選擇，那么默認的把templateData數(shù)組中的第一項的id賦值給tmId

總結：其實就是將id用另一個變量保存起來了。

如何給el-select賦默認值

如下圖所示：

比如select下拉框中的數(shù)據(jù)是動態(tài)返回的，如何賦默認的值。

<el-select v-model="value" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        data() {
            return {
                options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value: '選項1',

注：

1.必須先給options賦值，再給綁定的value賦值才行，即：

this.options=“后臺返回的值”
this.value=“想要賦的值”

2.value-key作為 value 唯一標識的鍵名，綁定值為對象類型時必填。如：

<el-select v-model="value" placeholder="請選擇" value-key="value">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item">
        </el-option>
      </el-select>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: