element-ui中的select下拉列表设置默认值方法

 更新时间:2018年08月24日 10:05:08   作者:cofecode  
今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

element-ui中的select下拉列表如何设置默认值?

在element-ui的运用中,涉及到了select下拉列表。项目中需要将select的默认值给展示出来

那如何修改呢?

上element-ui中的代码片段

<template>
 <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>
</template>

<script>
 export default {
 data() {
  return {
  options: [{
   value: '选项1',
   label: '黄金糕'
  }, {
   value: '选项2',
   label: '双皮奶'
  }, {
   value: '选项3',
   label: '蚵仔煎'
  }, {
   value: '选项4',
   label: '龙须面'
  }, {
   value: '选项5',
   label: '北京烤鸭'
  }],
  value: ''
  }
 }
 }
</script>

修改如下

<template>
 <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>
</template>

<script>
 export default {
 data() {
  return {
  options: [{
   value: '0',
   label: '全部'
  }, {
   value: '1',
   label: '待收款'
  }, {
   value: '2',
   label: '已收款'
  }, {
   value: '3',
   label: '已发货'
  },
  value: '全部'
  }
 }
 }
</script>

接下来。我们在点击查询的方法里打印一下value的值

onSearch () {
 // console.log('value是' + this.value)
 if (this.value === '全部') {
  this.value = '0'
 }
}

这样就保证了this.value打印出来的为0,1,2,3。拿到这些值后,就可以传给后端,请求数据了!

拓展知识:基于VUE中的el-select 初始值设置问题介绍

如下所示:

<el-select v-model="form.admin_type" placeholder="所在分组" ><el-option v-for="item in selectItem" :label="item.dict_desc" :value="item.dict_id" :key="item.dict_id"></el-option></el-select>

本人用的是vue下ELement,上面事例里面的v-model里面是admin_type是后台读取的一个类型值,

当这个admin_type和dict_id相等的时候,option就相当于设置了selected。

然后我每次后台读取的数据都没法显示真正的text(即上面option中label)的值,只是显示了dict_id的真实值。各种尝试后发现和我之前的一篇博客所说的问题一样。

因为后台读取到的dictId是字符串比如:“1”,而option根据value查找对比的是数字int:1,所以每次后台读取的数据必须在paraeInt,才可以正确显示。

以上这篇element-ui中的select下拉列表设置默认值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue动画之第三方类库实现动画方式

    Vue动画之第三方类库实现动画方式

    这篇文章主要介绍了Vue动画之第三方类库实现动画方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 在 Vue 中控制表单输入方法详解

    在 Vue 中控制表单输入方法详解

    这篇文章主要介绍了在 Vue 中控制表单输入方法详解的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue实现跑马灯简单效果

    Vue实现跑马灯简单效果

    这篇文章主要为大家详细介绍了Vues实现跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue-router 路由传参用法实例分析

    vue-router 路由传参用法实例分析

    这篇文章主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • vue 同局域网访问不到的问题及解决

    vue 同局域网访问不到的问题及解决

    这篇文章主要介绍了vue 同局域网访问不到的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue将html页面生成高清晰pdf文件的方法

    vue将html页面生成高清晰pdf文件的方法

    最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue中的inject学习教程

    vue中的inject学习教程

    本文通过实例代码给大家介绍了vue中的inject学习教程,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • Vue+Vite项目初建(axios+Unocss+iconify)的实现

    Vue+Vite项目初建(axios+Unocss+iconify)的实现

    一个好的项目开始搭建总是需要配置许多初始化配置,本文就来介绍一下Vue+Vite项目初建(axios+Unocss+iconify)的实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • 将vue项目打包成电脑端应用.exe的完整步骤

    将vue项目打包成电脑端应用.exe的完整步骤

    最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下
    2023-10-10
  • 基于vue3+antDesign2+echarts 实现雷达图效果

    基于vue3+antDesign2+echarts 实现雷达图效果

    这篇文章主要介绍了基于vue3+antDesign2+echarts 实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08

最新评论