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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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
一个显示天气预报的程序
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php实现每日签到功能
2018/11/29 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Pytorch to(device)用法
2020/01/08 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
三年级学生评语大全
2014/12/26 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Pyhton模块和包相关知识总结
2021/05/12 Python
Python中22个万用公式的小结
2021/07/21 Python