一,要实现的效果


像这样,想要把太多的菜单,做成这种下拉展开可点击的效果,但是官网中提供的案例,只能传入command一个参数:

<el-dropdown @command="handleCommand"><span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="a">黄金糕</el-dropdown-item><el-dropdown-item command="b">狮子头</el-dropdown-item><el-dropdown-item command="c">螺蛳粉</el-dropdown-item><el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item><el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item></el-dropdown-menu>
</el-dropdown><style>.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
</style><script>export default {methods: {handleCommand(command) {this.$message('click on item ' + command);}}}
</script>

二,解决办法

把每一项的command用属性绑定,来动态传入值。并且这个值是一个对象。里面就可以配置我们想要的参数了:

三,具体代码:

        <el-table-column label="操作" align="center" min-width="120" fixed="right"><template slot-scope="scope"><div class="operation"><el-link type="primary" @click="handleEdit(scope.row, scope.$index)">编辑</el-link><el-dropdown trigger="click" @command="handleCommand" size="small"><span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item :command="beforeHandleCommand(scope,'删除')">删除</el-dropdown-item><el-dropdown-item :command="beforeHandleCommand(scope,'角色绑定')">角色绑定</el-dropdown-item><el-dropdown-item :command="beforeHandleCommand(scope,'门店关联')">门店关联</el-dropdown-item><el-dropdown-item :command="beforeHandleCommand(scope,'修改密码')">修改密码</el-dropdown-item></el-dropdown-menu></el-dropdown></div></template></el-table-column>
handleCommand(command) {switch (command.command) {case "删除":this.handleDelete(command.scope)break;case "角色绑定":this.handleRole(command.scope.row)break;case "门店关联":this.handleBusiness(command.scope.row)break;default:this.handlePasswd(command.scope.row)break;}},beforeHandleCommand(scope,command){return {'scope':scope,'command':command}}

elementui中下拉菜单需要传入多个参数的处理相关推荐

  1. android中下拉菜单的制作(详解)

    在我们的android中下拉菜单的制作有两种的方法: 1: 一种的方式就是通过我们的布局文件的方法制作 2: 第二种方式就是通过我们的java代码的方式制作 第一种方式: <?xml versi ...

  2. AntDesign表格中下拉菜单

    表格更多操作下拉菜单 下拉点击传入key和对应行数据即可 <span slot="action" slot-scope="text, record"> ...

  3. python中下拉菜单大小_自动化测试——Selenium+Python之下拉菜单的定位

    1.通过selenium.webdriver.support.ui的Select进行定位 下拉菜单如下图: 定位代码(选择Male): from selenium.webdriver.support. ...

  4. 用HTML里面的表格制作可以下拉的导航栏,excel表格中下拉菜单制作有什么方法

    excel下拉菜单的制作也是经常使用的一个操作,通常就是利用数据有效性建立分类下拉列表实现.以下是学习啦小编为您带来的关于excel下拉菜单制作方法介绍,希望对您有所帮助. excel下拉菜单制作方法 ...

  5. 普通页面引入公共页面之后bootstrap中下拉菜单js效果失效无反应的问题

    说下最近写页面遇到的一个坑,公共页面里用bootstrap框架搭了一个导航条,带有下拉菜单的导航条,bootstrap的css样式 和js代码,在公共页面里已经引过了. 普通页面只需要引入下公共页面, ...

  6. excel填充序列_Excel中下拉菜单的制作

    经常用Excel的同学想必都碰到过下图中的下拉菜单,今天就通过Excel中的数据验证功能.定义名称和indirect函数来实现下拉菜单的制作. 带下拉菜单的Excel表格 准备工作 首先,根据我们需要 ...

  7. css表格中下拉菜单怎么设置,css如何实现下拉菜单?css实现下拉菜单的方法(完整代码)...

    本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...

  8. 关于Thymyleaf中下拉菜单几点需要注意的问题

    第一个问题:下拉菜单文字未显示完整: 先来看源码: <li><p>分类名称:</p><select name="className" cl ...

  9. python中下拉菜单大小_请问各位大神如何将下拉菜单的文字设定成一个值?

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 from tkinter import * from tkinter.ttk import Combobox class Calculator: def ...

  10. java 是怎么在中删除下拉列表_java中下拉菜单如何清空

    下面是调用代码 <script LANGUAGE="javascript" >  <!--  addMenuSys(0,"余额换购区",&qu ...

最新文章

  1. 数人云轻量级PaaS将弹性做到极致
  2. 对于容器环境来说 全栈监控究竟意味着什么?
  3. 套路、逻辑与思辨(道理的论证)
  4. e.printStackTrace()不是打印吗,还能锁死?
  5. 日照油库系统推荐_生产车间用什么地坪好?这款地面硬化系统使用一年后获车间主任点赞:太省心!| 项目回访...
  6. 机器学习-预测之时间序列分析预测法原理及实战
  7. Apache 服务器的安全策略
  8. 推荐!可视化垃圾回收算法(转)
  9. mysql 5.7 多线程主从复制_Mysql 5.7从节点配置多线程主从复制的方法详解
  10. keras可视化模型
  11. Baksmali用法
  12. Python服务器管理模块psutil学习使用
  13. 服务器虚拟化mv,MVMC简化虚拟机迁移过程
  14. mysql stored_mysql stored routine (存储例程) 中 definer 的作用 和实例
  15. java中的jQuery与Ajax的应用,菜鸟教程
  16. 如何从Linux里面下载软件
  17. 数据分析师的薪资大约有多少?
  18. linux系统发送短信,Linux系统的短信收发怎么实现?
  19. 如何将base64码保存为图片
  20. HDU - 4622 Reincarnation

热门文章

  1. 快速突破面试算法之栈与队列结构篇
  2. 实部和虚部高斯变量瑞利衰落matlab,瑞利衰落信道的matlab仿真.doc
  3. 原生php phpmailer 发送邮件 email
  4. @Value(#{})与@Value(${})的区别
  5. 【洛谷】 3264 [JLOI2015] 管道连接
  6. 二十、oracle pl/sql基础
  7. nacos更换数据库为mysql
  8. zuul网关,springsecurity认证中心 和 Swagger2 整合遇到的问题
  9. SpringBoot2.0整合jsp
  10. spring实例化前的准备操作