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

 更新时间:2022年09月02日 08:49:33   作者:官方哈哈  
这篇文章主要介绍了关于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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue分析同步和异步有什么区别

    Vue分析同步和异步有什么区别

    这篇文章主要介绍了Vue分析同步和异步有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-05-05
  • 一篇文章带你彻底搞懂VUE响应式原理

    一篇文章带你彻底搞懂VUE响应式原理

    这篇文章主要介绍了一篇文章带你彻底搞懂VUE响应式原理,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可任意参考一下,需要的朋友可以参考下
    2022-06-06
  • VUE项目启动没有问题但代码中script标签有蓝色波浪线标注

    VUE项目启动没有问题但代码中script标签有蓝色波浪线标注

    这篇文章主要给大家介绍了关于VUE项目启动没有问题但代码中script标签有蓝色波浪线标注的相关资料,文中将遇到的问题以及解决的方法介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue项目中使用ueditor的实例讲解

    vue项目中使用ueditor的实例讲解

    下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3安装dataV报错问题解决方案

    Vue3安装dataV报错问题解决方案

    这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
    2023-06-06
  • VUE 常规截取和特殊字符之前之后截取(实例代码)

    VUE 常规截取和特殊字符之前之后截取(实例代码)

    这篇文章主要介绍了VUE 常规截取和特殊字符之前之后截取,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • vue-cli中的babel配置文件.babelrc实例详解

    vue-cli中的babel配置文件.babelrc实例详解

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。本文介绍vue-cli脚手架工具根目录的babelrc配置文件,感兴趣的朋友一起看看吧
    2018-02-02
  • vue中监听路由参数的变化及方法

    vue中监听路由参数的变化及方法

    这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vue使用element-ui实现菜单导航

    Vue使用element-ui实现菜单导航

    这篇文章主要为大家详细介绍了Vue使用element-ui实现菜单导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论