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 文章截取部分无损html显示实现代码
May 04 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
javascript简单链式调用案例分析
May 10 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
vue实现单选和多选功能
Aug 11 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
实例讲解React 组件生命周期
Jul 08 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
ie 调试javascript的工具
2009/04/29 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Django 请求Request的具体使用方法
2019/11/11 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
django中ImageField的使用详解
2020/12/21 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
小学生思想品德评语
2014/12/31 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Django操作cookie的实现
2021/05/26 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers