关于el-select组件设置默认值的实现方式
作者：官方哈哈
这篇文章主要介绍了关于el-select组件设置默认值的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-select组件设置默认值问题
最近写项目的时候遇到将el-select组件设置默认值需求，通过查阅资料发现很多是使用v-model来实现的，但是只用v-model可能会有一些小小的问题。
因此根据他们的进行改变了一下
实现方式 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的值赋值为数组的第一个内容。其次在select中添加@change="selectTm"事件，这个事件会传入用户选择的id，然后将这个id赋值给tmId
有的小伙伴会问，如果用户没有做出选择，那么tmId就为空字符串了。并且选择器会不会永远是数组的第一个内容，不会的我们用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数组中的第一项的id赋值给tmId
总结：其实就是将id用另一个变量保存起来了。
如何给el-select赋默认值
如下图所示：
比如select下拉框中的数据是动态返回的，如何赋默认的值。
<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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。