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

一，要实现的效果

像这样，想要把太多的菜单，做成这种下拉展开可点击的效果，但是官网中提供的案例，只能传入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中下拉菜单需要传入多个参数的处理相关推荐

android中下拉菜单的制作（详解）
在我们的android中下拉菜单的制作有两种的方法: 1: 一种的方式就是通过我们的布局文件的方法制作 2: 第二种方式就是通过我们的java代码的方式制作第一种方式: <?xml versi ...
AntDesign表格中下拉菜单
表格更多操作下拉菜单下拉点击传入key和对应行数据即可 <span slot="action" slot-scope="text, record"> ...
python中下拉菜单大小_自动化测试——Selenium+Python之下拉菜单的定位
1.通过selenium.webdriver.support.ui的Select进行定位下拉菜单如下图: 定位代码(选择Male): from selenium.webdriver.support. ...
用HTML里面的表格制作可以下拉的导航栏,excel表格中下拉菜单制作有什么方法
excel下拉菜单的制作也是经常使用的一个操作,通常就是利用数据有效性建立分类下拉列表实现.以下是学习啦小编为您带来的关于excel下拉菜单制作方法介绍,希望对您有所帮助. excel下拉菜单制作方法 ...
普通页面引入公共页面之后bootstrap中下拉菜单js效果失效无反应的问题
说下最近写页面遇到的一个坑,公共页面里用bootstrap框架搭了一个导航条,带有下拉菜单的导航条,bootstrap的css样式和js代码,在公共页面里已经引过了. 普通页面只需要引入下公共页面, ...
excel填充序列_Excel中下拉菜单的制作
经常用Excel的同学想必都碰到过下图中的下拉菜单,今天就通过Excel中的数据验证功能.定义名称和indirect函数来实现下拉菜单的制作. 带下拉菜单的Excel表格准备工作首先,根据我们需要 ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
关于Thymyleaf中下拉菜单几点需要注意的问题
第一个问题:下拉菜单文字未显示完整: 先来看源码: <li><p>分类名称:</p><select name="className" cl ...
python中下拉菜单大小_请问各位大神如何将下拉菜单的文字设定成一个值？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 from tkinter import * from tkinter.ttk import Combobox class Calculator: def ...
java 是怎么在中删除下拉列表_java中下拉菜单如何清空
下面是调用代码 <script LANGUAGE="javascript" > <!-- addMenuSys(0,"余额换购区",&qu ...

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

一，要实现的效果

二，解决办法

三，具体代码：

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

最新文章

热门文章