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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php实现jQuery扩展函数
2009/10/30 PHP
PHP合并静态文件详解
2014/11/14 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python程序 创建多线程过程详解
2019/09/23 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
编辑个人求职信范文
2013/09/21 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
市场营销专业自荐书
2014/06/10 职场文书
通知的格式范文
2015/04/27 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书