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

- 过程:
认认真真的看了好几遍文档,但是还没找到原因,不过还是应该感谢自己加入的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下拉框不能赋值的更多相关文章
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- layui给select下拉框赋值
转: layui给select下拉框赋值 layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function ...
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
- 好看的Select下拉框是如何制造的
现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...
- EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
- s:select下拉框validation验证
S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
随机推荐
- tomcat架构分析 (connector NIO 实现)
出处:http://gearever.iteye.com 上一篇简单记录了缺省配置的connector的内部构造及消息流,同时此connector也是基于BIO的实现.除了BIO外,也可以通过配置快速 ...
- java面试2
1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽 ...
- oracle 制定定时任务
本节摘要:本节介绍使用oracle自带的job来实现oracle定制定时执行任务. 1.引言 定制定时执行的任务有两种形式,系统级别和数据库级别, 从操作系统级别来讲, windows系统我们可以 ...
- 修改 login的串口重定向
1 在console-telnet 使用vi工具编辑 /etc/inittab 文件 vi /etc/inittab (回车)2 按 i 进入编辑模式:3 将文件中的ttyS0 改为 ttyS3 ...
- gsm at 指令
一.一般命令 AT+CGMI 给出模块厂商的标识. SONY ERICSSON AT+CGMM 获得模块标识.这个命令用来得到支持的频带(GSM900,DCS1800或PCS1900).当模块有多频带 ...
- kernel printk信息显示级别
涉及文件:kernel/printk.c include/linux/kernel.h用printk内核会根据日志级别把消息打印到当前控制台上.信息正常输出前提是--日志输出级别(msg_log_le ...
- 用SNMP实现对大型网络的轻松管理!
原文来自:http://guojiping.blog.51cto.com/5635432/985885 一.原理介绍: SNMP简介 目前网络中用得最广泛的网络管理协议是SNMP(Simple ...
- Python 爬验证码
主要实现功能: - 登陆网页 - 动态等待网页载入 - 验证码下载 非常早就有一个想法,就是自己主动依照脚本运行一个功能.节省大量的人力--个人比較懒.花了几天写了写,本着想完成验证码的识别,从根本上 ...
- es 配置文件
[root@es02 config]# egrep -v "^(#|$)" elasticsearch.yml cluster.name: v5-applicationnode.n ...
- Python RGB 和HSV颜色相互转换
转自:http://outofmemory.cn/code-snippet/1002/Python-RGB-HSV-color-together-switch Python RGB 和HSV颜色相互转 ...