• 前言:

需要用到类似于下面的下拉选择框,按照官方文档写,始终实现不了下拉框赋上值的情况。

  • 过程:

认认真真的看了好几遍文档,但是还没找到原因,不过还是应该感谢自己加入的vue-admin的微信群,大家有问题可以一致讨论,于是今早就看到有大神说道:

于是就看到了element-ui的官网果然更新到了1.3.0,果断升级,结果还真的实现了效果。下面就是自己实现下拉框的两种做法:

1)做法一:当数据不太多时,直接写在页面上;

<el-form-item label="状态:">
<el-select v-model="filters.state" placeholder="请选择状态">
<el-option label="正常" value="1"></el-option>
<el-option label="禁用" value="-1"></el-option>
</el-select>
</el-form-item>
export default {
data() {
return {
filters: {
state:''
},
...

2)做法二:当下拉框的数据多时,可以将选项写在js当中;

<el-form-item label="状态:">
<el-select v-model="filters.value" clearable placeholder="请选择状态">
<el-option
v-for="item in filters.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
export default {
data() {
return {
filters: {
options: [
{ value: -100,label: '请选择'},
{ value:1,label: '正常'},
{ value: -1,label: '禁用'}
],
value:''
},
...

以上两种方式均可实现如第一幅图上的下拉选择框。

  • 后言:

有时间多看看关于自己用到的东西论坛区,没准自己遇到的问题会豁然开朗!

select下拉框不能赋值的更多相关文章

  1. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  2. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  3. layui给select下拉框赋值

    转: layui给select下拉框赋值 layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function ...

  4. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  5. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  6. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  7. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  8. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  9. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

随机推荐

  1. c++之五谷杂粮4---explicit

    4.1在要求隐式转换的程序上下文中,我们可以通过将构造函数声明为explicit加以阻止. 关键字explicit只对一个实参的构造函数有效.需要多个实参的构造函数不能用于执行隐式转换,所以无需将这些 ...

  2. egret请求参数

    egret的文档还不错,不过http请求参数的文档居然没有,于是自己摸索了一下, 发现原来是直接传字符串参数就可以了.于是封装了一个类,方便使用. class RequestParam { publi ...

  3. mysql升级php找不到pdo

    最近把mysql升级到了5.6,当时工作正常,等周末一来php报错,提示找不到pdo. 甚是奇怪啊,看了一下phpinfo,果然没有mysql的pdo驱动了. 于是用yum又重新安装php-pdo,还 ...

  4. 【Unity笔记】摄像机、图片的模糊处理

    重要的参考: http://www.imooc.com/video/7303 摄像机模糊 http://www.xuanyusong.com/archives/3541 http://www.cnbl ...

  5. nfs服务器与客户端配置

    服务器端(PC)配置 ubuntu提供两种NFS服务器:一种以内核模块形式提供,nfs-kernel-server:一种以用户空间程序形式提供,nfs-user-server;两种择一即可.1. 安装 ...

  6. MongoDB 集群搭建(主从复制、副本及)(五)

    六:架构管理 mongodb的主从集群分为两种: 1:master-Slave 复制(主从)    --从server不会主动变成主server,须要设置才行 2:replica Sets 复制(副本 ...

  7. Log4j,Log4j2,logback,slf4j日志学习

    日志学习笔记 Log4j Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.数据库等:我们也可以控制每一条日志的输出格式:通过定义每一条 ...

  8. jquery 新建的元素事件绑定问题研究[转]

    原文:http://www.cnblogs.com/linzheng/archive/2010/10/17/1853568.html js的事件监听跟css不一样,css只要设定好了样式,不论是原来就 ...

  9. Qt学习之路(tip): parent参数

    这是一篇很简单的文章,仅仅是用来说明一下一个参数的作用,因此我把它写成了tip,而不是接下来的17.   程序写的多了,你会发现几乎所有的Qt类的构造函数都会有一个parent参数.这个参数通常是QO ...

  10. tensorflow 单机多GPU mnist实例

    http://blog.csdn.net/guotong1988/article/details/74748806 如何使用多GPU http://wiki.jikexueyuan.com/proje ...