关于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>
js数组去重常见的方法汇总(7种) 网站建设

js数组去重常见的方法汇总(7种)

我们做项目的时候往往会需要把数组里面一些重复的项去掉,下面这篇文章主要给大家介绍了关于js数组去重常见的7种方法汇总,对每种方法都进行了总结,需要的朋友可以参考下! 1、借助ES6提供的Se...
Win11扬声器无声音且无插座信息的解决方法 网站建设

Win11扬声器无声音且无插座信息的解决方法

Win11扬声器无插座信息怎么解决?近期有部分Win11用户跟小编反映,自己的电脑在更新好系统并重启开机后,出现了系统没有声音的情况,而且还显示扬声器无插座信息,音频服务未响应。对此有没有什么方法解决...