elementUI select组件默认选中效果实现的方法
首先,v-model的值为当前被选中的el-option的 value 属性值
需求:进入编辑页面,状态栏默认选中生效,如下显示:
html部分代码:
<el-form-item label="状态"> <el-select v-model="form.status" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item>
data的form中定义status属性:
再看data中options的定义,options为选择框中所有的可选内容,有label属性(某一项的名字)和value属性(某一项的具体的值),value才是我们需要的值,也是传到后端的值,而label是展示给用户看的值,重复一点:v-model的值为当前被选中的el-option的 value 属性值
options: [{ value: '1', label: '生效' }, { value: '2', label: '失效' }],
因此,如果需要默认选中生效选项,需要把生效对应的value赋给el-select的v-model
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.
-
element-ui中select组件绑定值改变,触发change事件方法
1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S 安装element-ui 3.按需引入select组件 在main.js中写入如下代码 /* 导入第三方库开始 */ import 'element-ui/lib/theme-chalk/index.css'; // 按需加载Select组件 import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option)
-
vue2.0结合Element实现select动态控制input禁用实例
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也
-
element-ui中的select下拉列表设置默认值方法
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来 那如何修改呢? 上element-ui中的代码片段 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=&qu
-
element-ui 关于获取select 的label值方法
在某些场景下,还是需要在获得label的值跟Value值的. vue获取值的方式: <el-form-item label="库位" prop="goodsLocationId" > <el-col :span="15"> <el-select v-model="scope.row.goodsLocationId" placeholder="货位地址" @change=&quo
-
浅谈Vue Element中Select下拉框选取值的问题
之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="
-
Vue Element 分组+多选+可搜索Select选择器实现示例
最终效果(http://47.98.205.88:3000/mult_group_selection)见下图.实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选.供有相关需求的开发者参考 准备工作: 除了vue脚手架.element等必要包之外.该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容. npm install --save linq
-
解决element ui select下拉框不回显数据问题的解决
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo
-
elementUI select组件默认选中效果实现的方法
首先,v-model的值为当前被选中的el-option的 value 属性值 需求:进入编辑页面,状态栏默认选中生效,如下显示: html部分代码: <el-form-item label="状态"> <el-select v-model="form.status" placeholder="请选择"> <el-option v-for="item in options" :key="
-
elementUI select组件使用及注意事项详解
elementUI select组件使用详解 动态生成option选项 option选项绑定对应的文本值和value值 作为表单项目,新增.编辑功能 对选项改变后触发相关事件 <div id="app"> <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm"> <el-form-i
-
关于Element-ui中table默认选中toggleRowSelection问题
目录 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection 二.操作 三.案例 Element-ui踩坑之表格选中toggleRowSelection问题 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中 注意:调用toggle
-
JQuery选中select组件被选中的值方法
jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 设置select: 设置se
-
laravel-admin select框默认选中的方法
laravel-admin后台框架的select选择框的默认选中,结合select2的js插件: 文档http://laravel-admin.org/docs/#/zh/model-form-fields?id=select%E9%80%89%E6%8B%A9%E6%A1%86: 文档里面没有看到这个默认选中的属性,也可能是我没有找到:查阅了select2的文档看到了selected属性,通过曲线的方式实现了这个功能: protected function form() { return Ad
-
去掉activity默认动画效果的简单方法
很多手机都会自带一些Activity切换动画,项目中如果我们需要禁用掉系统Activity切换的动画,可以使用如下方法: 一.重写Activity的Them中的windowAnimationStyle相关属性,并保存在res/values/styles.xml <style name="Theme.notAnimation" parent="android:Theme.Light.NoTitleBar.Fullscreen"> <item name
-
elementUI select组件value值注意事项详解
select组件的使用方式就不细说,可查看select组件使用方式 主要要说一下注意事项: select组件可以动态生成option选项,option选项绑定对应的文本值和value值. 有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本,这种情况原因都是: v-model绑定的值与option选项value值类型不符, 常规就是number与string 通用我们会循环一个数组.对象生成option选项 1.简单数组 const array1=[1,2,3] <el-sel
-
jquery select 设置默认选中的示例代码
代码如下: 其中<%=selectedvalue %>为从后台获取的值 $(document).ready(function(){ $("#seltype").attr("value",parseInt('<%=selectedvalue %>')); })
-
ElementUI Tag组件实现多标签生成的方法示例
现在好多应用场景里会有一些需要给文章打标签等类似的操作,之前jquery用户是使用taginput来实现,使用VUE以后elementui有一个组件非常简单就是tag组件. <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag}} <
-
关于element-ui 单选框默认值不选中的解决
目录 element-ui 单选框默认值不选中 看我的下图吧 element-ui单选框组件,默认选中无效 element-ui 单选框默认值不选中 初次使用elementui单选框 发现一个问题 按照官网的案例 我cv过来 发现不对劲 怎么默认值不选中 如下图 ,难道我cv没cv正确??? 心里那个气啊,难道我发现了element-ui bug了???好的在cv一遍 还是发现默认值不选中,我就好 好看el-radio各个属性,依然百思不得其解,后来研究了一下,原来是自己的菜导致默认值不选中的
随机推荐
- 利用JS实现点击按钮后图片自动切换的简单方法
- avira premium avira中文绿色版下载
- IIS和.net framework 4.0的安装顺序导致的问题(重新注册.net 4.0)
- Oracle Form中COMMIT的概述及使用技巧
- js禁止页面刷新与后退的方法
- ASP.net(c#) 生成html的几种解决方案[思路]第1/2页
- PHP应用分页显示制作详细讲解
- 用javascript修复浏览器中头痛问题的方法整理篇[译]第1/4页
- 利用js动态添加删除table行的示例代码
- 简单实现JS计算器功能
- 一个网站的计划书的写作方法
- C语言编程中统计输入的行数以及单词个数的方法
- android网络编程之android连接网络的简单示例代码
- Azure给ubuntu虚拟机挂载数据盘的详细步骤
- Js中使用正则表达式验证输入是否有特殊字符
- SpringBoot + Mybatis增删改查实战记录
- 解决SDK注入权限验证安卓正常,IOS出现config fail的方法
- JS Math对象与Math方法实例小结
- Java实现的傅里叶变化算法示例
- 如何在Vue中使用CleaveJS格式化你的输入内容