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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
JavaScript实现网页动态生成表格
Nov 25 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
php横向重复区域显示二法
2008/09/25 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
vue2.x select2 指令封装详解
2017/10/12 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python+微信接口实现运维报警
2016/08/27 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python可视化实现代码
2019/01/15 Python
python lxml中etree的简单应用
2019/05/10 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
查环查孕证明
2014/01/10 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2015年药店工作总结
2015/04/20 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang