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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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堆栈与列队的学习
2013/06/21 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
js实现开关灯效果
2020/03/30 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
python发腾讯微博代码分享
2014/01/10 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
职业技术学校毕业生推荐信
2013/12/03 职场文书
甜点店创业计划书
2014/01/27 职场文书
优秀干部获奖感言
2014/01/31 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2015年党性分析材料
2014/12/19 职场文书