关于el-select组件设置默认值的实现

实现方式 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用另一个变量保存起来了。如果各位小伙伴有更好的实现方式可以下方留言一起学习共同进步。