vue elementUI select下拉框设置默认值(赋值)失败的解决
作者：nav-item
这篇文章主要介绍了vue elementUI select下拉框设置默认值(赋值)失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
elementUI select下拉框设置默认值
要为select下拉框设定默认值，只需要把 v-model 绑定的值和你想要选中 option 的 value 值设置一样即可。
下面上代码：
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 设置为 和你想要选中 option 的 value 值设置一样，想要设置 “全部”那个选项，所以 设置成对应的value 为0。（注意：这里的0是数字类型，不是字符串）
在这里已经设置为 默认的为 全部 选项了。
关于element select框默认值赋值不成功问题，
注意两点：
1、v-model里面的数据和遍历出来value值数据类型不一样。（例：item.provinces类型是number，province类型是String。类型不一样导致赋值不成功）
2、遍历数据和赋值的先后顺序，必须保证数据先遍历后赋值。
ElementUI Select设置默认值更改选择后值不改变
使用 ElementUI 的 Select 选择器选择了其他选择值，框内的值没有改变，还是显示原来的值，但是绑定的id值变了
解决方案
在选择器的值发生改变时刷新选择器组件:@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中没有定义才会出现这种问题，如果绑定的是对象的话，比如绑定的是obj.value，并且data中已经定义了，还出现了绑定值不变的情况，说明在代码编辑的过程中把obj重新赋值了，赋的值中没有value属性，也就是说把value属性给干掉了，所以会出现绑定值不变的情况，所以要做的就是在代码中把value属性加上就可以了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。