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

最新推荐文章于 2025-07-01 02:55:11 发布

官方哈哈

最新推荐文章于 2025-07-01 02:55:11 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # Element-ui 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qwerewf/article/details/108117364

Element-ui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在Vue项目中使用el-select组件设置默认值的方法。通过v-model绑定和监听change事件，确保用户未选择时默认展示数组首个元素，同时记录用户选择的ID。这种方法既实现了默认值的设置，又保证了用户选择的实时反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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
		  }
		}
}