vue+element搭建后台小总结 el-dropdown下拉功能


Posted in Javascript onApril 10, 2020

本文实例为大家分享了el-dropdown下拉功能的具体代码,供大家参考,具体内容如下

功能:点击el-dropdown 下拉 

下拉的数据 从后台获取 遍历到界面上

且多个el-dropdown下拉 共用 一个 @command 事件  @command="handleCommand"

vue+element搭建后台小总结 el-dropdown下拉功能

上代码部分  html

//全部城市 下拉
//handleCommand下拉事件 all_city点击后显示在上面的数据 
item.label下拉的数据 :command点击传的值 用flag来区分同一个事件的不同处理方法
 
<el-form-item label>
 <el-dropdown @command="handleCommand">
 <span class="el-dropdown-link">
 {{ all_city }}<i class="el-icon-arrow-down el-icon--right" />
 </span>
 <el-dropdown-menu slot="dropdown" align="center">
 <el-dropdown-item
 v-for="item in all_city_list"
 :key="item.value"
 :command="{value:item.value,label:item.label,flag:1}"
 > {{ item.label }}
 </el-dropdown-item>
 </el-dropdown-menu>
 </el-dropdown>
</el-form-item>
 
//全部状态 下拉
<el-form-item label>
 <el-dropdown trigger="click" class="dropdown" @command="handleCommand">
 <span class="el-dropdown-link">
  {{ all_type_org }}<i class="el-icon-arrow-down el-icon--right" />
 </span>
 <el-dropdown-menu
 slot="dropdown" align="center" class="org_select_menu_two">
  <el-dropdown-item
  v-for="item in all_type_org_list"
  :key="item.value"
  :command="{value:item.value,label:item.label,flag:2}"
  > {{ item.label }}
 </el-dropdown-item>
 </el-dropdown-menu>
 </el-dropdown>
 </el-form-item>

js

methods: {
 // select 点击
 // command是接收点击传值 用flag区分用户点的是哪个select 然后进行select赋值
 handleCommand(command) {
 console.log(command)
 var isCommand = ''
 switch (command.flag) {
 case 1:
 this.all_city = command.label
 isCommand="AreaCode"
 break
 case 2:
 this.all_type_org = command.label
 isCommand="IsActived"
 break
 default:
 return
 }
 //点击之后 发起请求 筛选数据
 var data = {
 "data": {
 "numberPerPage": 10,
 "currentPage":this.currentPage,
 "filters": [
 {
 "key": isCommand,
 "value": command.value
 }
 ]
 },
 "correlationId": "535d12c3-4a75-4e5f-9236-9d8967f0bca8",
 "invokingUser": "57a080b5-dd88-41b7-a9ea-7d7850bd396a",
 "businessProcessName": "CommunitySearchService"
 }
//请求函数 我用的是vue-admin-template的vue后台基础模板 请求是封装好的
 communitySearch(data).then(res => {
 let Data = JSON.parse(JSON.stringify(res.data));
 Data.forEach((item, index) => {
 if(item.isActived==true){
 item.isActived="有效"
 }
 if(item.isActived==false){
 item.isActived="无效"
 }
 })
 this.tableData =Data
 this.total = res.pager.totalItems
 })
 }
}

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是javascript实现省市区三级联动下拉框菜单的全部代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
简述JS控制台的使用
Jul 15 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 #Javascript
react实现同页面三级跳转路由布局
Sep 26 #Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
微信小程序实现拖拽功能
Sep 26 #Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 #Javascript
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP的拦截器实例分析
2014/11/03 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
图片完美缩放
2006/09/07 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
javascript常用的方法分享
2015/07/01 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
js闭包学习心得总结
2018/04/17 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
什么是python的函数体
2020/06/19 Python
2014年度安全生产目标管理责任书
2014/07/25 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python