關(guān)于el-select組件設(shè)置默認(rèn)值的實(shí)現(xiàn)方式

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

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

el-select組件設(shè)置默認(rèn)值問(wèn)題

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

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

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

? ?<el-select v-model="templateValue" placeholder="請(qǐng)選擇模板" @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:'沒(méi)有任何文件',//文件名

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

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

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
?? ??? ? ?}
?? ??? ?}
}

用來(lái)判斷用戶是否做出選擇了，如果沒(méi)有選擇，那么默認(rèn)的把templateData數(shù)組中的第一項(xiàng)的id賦值給tmId

總結(jié)：其實(shí)就是將id用另一個(gè)變量保存起來(lái)了。

如何給el-select賦默認(rèn)值

如下圖所示：

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

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

注：

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

this.options=“后臺(tái)返回的值”
this.value=“想要賦的值”

2.value-key作為 value 唯一標(biāo)識(shí)的鍵名，綁定值為對(duì)象類型時(shí)必填。如：

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: