如何设置el-select组件默认值实现方式？

本文共计664个文字，预计阅读时间需要3分钟。

目录 + el-select组件设置默认值问题 + 如何给el-select赋默认值 + el-select组件设置默认值问题 + 最近写项目的时候遇到将el-select组件设置默认值的需求，通过查阅资料发现很多是使用v-model来实现的

目录

• 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。