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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python如何实现爬取B站视频
2020/05/20 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
面试求职的个人自我评价
2013/11/16 职场文书
暑期实践思想汇报
2014/01/06 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
党支部工作总结2015
2015/04/01 职场文书
如何写辞职信
2015/05/13 职场文书
iPhone13再次曝光
2021/04/15 数码科技
深入详解JS函数的柯里化
2021/06/09 Javascript
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python