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


Posted in Javascript onAugust 24, 2018

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下拉列表设置默认值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
vue 登录滑动验证实现代码
Aug 24 #Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 #Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 #Javascript
element-ui表格数据转换的示例代码
Aug 24 #Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
js实现磁性吸附的示例
2020/10/26 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python with语句的原理与用法详解
2020/03/30 Python
浅谈Python中的模块
2020/06/10 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
大学生实习鉴定评语
2014/04/25 职场文书
教师暑期培训感言
2014/08/15 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers