Vue下拉列表el-select二级联动效果
最近公司有一个C#的项目需要来完成,前端用了Vue.js。首次使用Vue.js还是有点不适应的。
功能介绍:要实现第一级下拉列表数据改变时,二级下拉列表的值随着改变。
<el-form-item prop="p_Roleprop" label="角色权限:"><div><el-select v-model="p_Role.value" style="width:230px" @change="Rolechanges()" placeholder="请选择"><el-option v-for="item in EUserP_Role" :key="item.value" :label="item.key" :value="item.value"> </el-option></el-select><span style="color:#606266;">表名</span><el-select v-model="p_table.value" style="width:230px" @change="Tablechanges()" placeholder="请选择"><el-option v-for="item in EUserP_Table" :key="item.value" :label="item.key" :value="item.value"> </el-option></el-select></div></el-form-item>
JS代码:
getRole() {this.EUserP_Role = [];this.$API.Permission.Get_Role().then(res => {res.forEach((o, index) => {this.EUserP_Role.push({ key: o.Name, value: o.ID }); });});},Rolechanges() {this.EUserP_Table = [];this.$API.Permission.Get_Table({ prid: this.p_Role.value }).then(res => {res.forEach((o, index) => {this.EUserP_Table.push({ key: o.TableName, value: o.ID });});});this.isAble = false;this.p_table.value = "";},Tablechanges() {this.EUserP_Field = [];this.$API.Permission.Get_Field({ ptid: this.p_table.value }).then(res => {res.forEach((o, index) => {this.EUserP_Field.push({ key: o.FieldName, value: o.ID }); });});if (this.EUserP_Table.findByID(this.p_table.value, "value").key == "Product Group" || this.EUserP_Table.findByID(this.p_table.value, "value").key == "Product RRP"){this.isAble=true;}else{this.isAble=false;}},
Vue下拉列表el-select二级联动效果相关推荐
- vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分 首先是建立两个表的实体 需要注意的就是写注解了 ...
- vue实现下拉二级联动_vue实现二级联动效果
你如城市与省份间的二级联动效果 demo .pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;} 所在区域 {{i ...
- vue.js 默认选中select_vue select二级联动第二级默认选中第一个option值的实例
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 所在区域 {{item.country}} {{item}} d ...
- vue实现下拉二级联动_vue 实现二级联动
因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下: 第一种: 这是第一种方法的html部分代码: {{y ...
- javascript实现下拉条联动_js实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 String path = request.getContextPath(); String basePath = ...
- vue下拉el-select二级联动
vue下拉el-select二级联动 <el-selectv-model="departmentid"placeholder="请选择部门"@change ...
- Android:高仿百度外卖、美团、淘点点二级联动效果!
美团,百度外卖的左右二级联动效果如下: 具体的效果建议打开手机软件玩玩. 分析 首先我们一起分析一下这个界面给我们要怎么去实现. 1.最上面的ToolBar不用多解释,比较简单. 2.下面三个界面切换 ...
- iview的select联动_iview2 之select二级联动细谈
还是二级联动问题,之前的方法是可以实现二级联动的.但是理想很丰满,现在很骨感.因为后台可能也没法给你理想的数据结构.最后想到办法的利用两个接口拿到数据,实现渲染.直接来代码 {{ item.first ...
- php 下拉菜单多选get,Jquery实现select二级联动多选下拉菜单
前言 平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
- js 下拉层级多选_Jquery实现select二级联动多选下拉菜单
前言 平时虽然也有写前端,但是对于一些复杂的功能实现仍是一知半解.这次项目需要实现一个多选下拉菜单,并且该菜单要和上级下拉菜单保持联动.更加麻烦的是,我需要完成以下操作,以省.市二级联动菜单为例: 选 ...
最新文章
- unmappable character for encoding UTF8
- PhpForm表单验证
- spark学习:ContextCleaner清理器
- android 抽象方法作用,android – 类必须声明为abstract或实现抽象方法
- Akamai “三驾马车”,如何应对疫情后新场景形态下的新考验?
- matplotlib设置画布大小_PyTorch 49.matplotlib模块
- java webservice 接收数据_WebService客户端,接收数据解析存入数据库
- 【扩频通信】基于matlab直接序列扩频通信【含Matlab源码 1004期】
- Linux内核模块编程
- linux journalctl使用详解
- JavaWeb相关知识和技巧概括
- 300字总结计算机flash,flash实训报告心得(共10篇).docx
- python调用gpu amd_TensorFlow通过AMD GPU加速(ROCm/Ubuntu 18.04)
- 单片机指令系统(1)
- 基于PHP和MySQL的奶茶网站,基于PHP和MySQL的网站设计与实现
- Java 存牌洗牌发牌看牌
- 全球及中国车载定位模块行业发展格局与运营动向分析报告2022版
- php代码生成折现统计图
- 原生js实现点名册效果
- NVIDA CUDA显卡算力对照表