vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決

更新時間：2023年10月08日 09:22:06 作者：nav-item

這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

elementUI select下拉框設(shè)置默認(rèn)值

要為select下拉框設(shè)定默認(rèn)值，只需要把 v-model 綁定的值和你想要選中 option 的 value 值設(shè)置一樣即可。

下面上代碼：

html部分代碼：

<el-select v-model="valuetype"  @change="changetype">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>

script部分代碼：

export default {
        data() {
            return {
                options: [
                    {
                        value: 'all',
                        label: 0
                    },
                    {
                        value: 'model',
                        label: 1
                    },
                    {
                        value: 'machine',
                        label: 2
                    }
                ],
                valuetype: 0,
            };
        },
     }

所以把 v-model 綁定的 valuetype 設(shè)置為和你想要選中 option 的 value 值設(shè)置一樣，想要設(shè)置 “全部”那個選項，所以設(shè)置成對應(yīng)的value 為0。（注意：這里的0是數(shù)字類型，不是字符串）

在這里已經(jīng)設(shè)置為默認(rèn)的為全部選項了。

關(guān)于element select框默認(rèn)值賦值不成功問題，

注意兩點：

1、v-model里面的數(shù)據(jù)和遍歷出來value值數(shù)據(jù)類型不一樣。（例：item.provinces類型是number，province類型是String。類型不一樣導(dǎo)致賦值不成功）

2、遍歷數(shù)據(jù)和賦值的先后順序，必須保證數(shù)據(jù)先遍歷后賦值。

ElementUI Select設(shè)置默認(rèn)值更改選擇后值不改變

使用 ElementUI 的 Select 選擇器選擇了其他選擇值，框內(nèi)的值沒有改變，還是顯示原來的值，但是綁定的id值變了

解決方案

在選擇器的值發(fā)生改變時刷新選擇器組件:@change=“$forceUpdate()”

<el-select
? v-model="Value"
? placeholder="請選擇"
? @change="$forceUpdate()"
>
? <el-option
? ? v-for="item in List"
? ? :key="item.id"
? ? :label="item.name"
? ? :value="item.id"
? />
</el-select>

注意：

我查找了下綁定值沒變的原因是因為我綁定的value值在data中沒有定義才會出現(xiàn)這種問題，如果綁定的是對象的話，比如綁定的是obj.value，并且data中已經(jīng)定義了，還出現(xiàn)了綁定值不變的情況，說明在代碼編輯的過程中把obj重新賦值了，賦的值中沒有value屬性，也就是說把value屬性給干掉了，所以會出現(xiàn)綁定值不變的情況，所以要做的就是在代碼中把value屬性加上就可以了。