返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ElementUI中的el-dropdown传入多参数的实现方法
  • 762
分享到

ElementUI中的el-dropdown传入多参数的实现方法

2024-04-02 19:04:59 762人浏览 八月长安
摘要

最近工作中因为业务中按钮的增多,导致页面排版按钮过多,页面不够美观,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(把多个按钮整合到了一起,下拉实现) 但是El

最近工作中因为业务中按钮的增多,导致页面排版按钮过多,页面不够美观,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(把多个按钮整合到了一起,下拉实现)

在这里插入图片描述

但是ElementUi官方文档中的handleCommand方法只允许接入一个参数,这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数(如果和我一样,也是用table显示数据的话)的对象进去,后面要使用这个对象的某些字段传给后台进行一些增删改查的操作。

ElementUi官方文档中el-dropdown的样例如下:
el-dropdown 官方文档


<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>

我们必须在执行handleCommand方法之前,对这个command参数进行重新封装成一个对象,使其内部包含我们想要的数据方便后面调用。

代码如下:


<el-table-column label="操作1">
    <template slot-scope="scope">
        <el-dropdown split-button type="primary" @command="handleCommand">
            其他操作
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">废弃</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">上传原件</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">原件整理</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'d')">冻结</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'e')">解冻</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

因为我们是写在表格里的,所以需要一个插槽,具体的根据实际情况进行修改。给标签的command属性绑定一个方法,这个方法就可以传入我们想要的参数,然后利用这个方法封装成一个对象,再将这个对象传入handleCommand方法。


<script>
export default {
    methods: {
        handleAbandon(index, row) {
           //todo
        },
        handleUpload (index, row) {
            //todo
        },
        handleSettle(index, row){
           //todo   
        },
        beforeHandleCommand(index, row,command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://废弃
                    this.handleAbandon(command.index,command.row);
                    break;
                case "b"://上传原件
                    this.handleUpload (command.index,command.row);
                    break;
                case "c"://原件整理                    
                	this.handleSettle(command.index,command.row);
                    break;
            }
        }
    },
}
</script>

到此这篇关于ElementUI中的el-dropdown传入多参数的实现方法的文章就介绍到这了,更多相关ElementUI中el-dropdown传入多参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: ElementUI中的el-dropdown传入多参数的实现方法

本文链接: https://lsjlt.com/news/159799.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ElementUI中的el-dropdown传入多参数的实现方法
    最近工作中因为业务中按钮的增多,导致页面排版按钮过多,页面不够美观,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(把多个按钮整合到了一起,下拉实现) 但是El...
    99+
    2024-04-02
  • ElementUI中的el-dropdown传入多参数的实现方法是什么
    这篇文章主要讲解了“ElementUI中的el-dropdown传入多参数的实现方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“ElementUI中的el-dropdown传入多参数...
    99+
    2023-06-22
  • elementUI中的el-tree实现checkbox单选框及bus传递参数功能
    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 e...
    99+
    2024-04-02
  • Mybatis实现传入多个参数的四种方法详细讲解
    目录一、Mybatis四种传递多个参数的方式1)参数索引2)@Param3)Map集合4)POJO实体类一、Mybatis四种传递多个参数的方式 XML文件或者注解中都通过#{}获取...
    99+
    2023-01-28
    Mybatis传入多个参数 Mybatis传入参数
  • C++多线程传参的实现方法
    目录1.线程传参的过程1.1 内置类型的实参1.2 类类型的实参1.3 传入智能指针unique_ptr1.线程传参的过程 下面是thread的源代码 template< cl...
    99+
    2023-05-17
    C++多线程传参 C++ 线程传参
  • MyBatis传入参数为List对象的实现方法
    这篇文章主要介绍MyBatis传入参数为List对象的实现方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!SSM框架是JavaWeb必学的框架,虽说基本的增删改查很简单,但是当面临一些特殊情况时,有时还是会显得手足...
    99+
    2023-06-07
  • Python传入参数的几种方法
    Python传入参数的方法有:位置参数、默认参数、可变参数、关键字参数、和命名关键字参数、以及各种参数调用的组合 Python唯一支持的参数传递方式是『共享传参』(call by sharing) 多数面向对象语言都采用这...
    99+
    2023-01-31
    几种方法 参数 Python
  • MyBatis传入多个参数时parameterType的写法
    目录MyBatis传入多个参数时parameterType写法方法1:对象方法2:Map方法3:@Param()MyBatis传入多个参数 批量更新Service调用Mapper 方...
    99+
    2022-12-22
    MyBatis传入多个参数 parameterType写法 MyBatis parameterType
  • Vue的指令中实现传递更多参数
    目录概要基本原理基于闭包的扩展方案实例和代码实现Main.js中将指令对应的插件全局化ImageLoad插件定义图片加载管理类的定义Vue 3.0的实现概要 我们在使用Vue的开发项...
    99+
    2024-04-02
  • python传入参数的方法有哪些
    在Python中,传递参数的方法有以下几种:1. 位置参数(Positional Arguments):按照参数在函数定义时的顺序进...
    99+
    2023-09-16
    python
  • vue中的get方法\post方法如何实现传递数组参数
    目录get方法\post方法如何传递数组参数第一部分:vue中get方法如何传递数组参数 下面列出我的接口格式及解决方法的源码vue get与post传参方式1.post:...
    99+
    2024-04-02
  • scrapy中的spider传参实现增量的方法
    有时候需要根据项目的实际需求向spider传递参数来控制spider的运行方式。 比如说,1.根据用户提交的url来控制spider爬取的网站。2.根据需求增量爬取数据。 今天就写一...
    99+
    2024-04-02
  • Shell脚本函数传递参数的实现方法
    如何传递参数到Shell脚本函数 通常,在其他脚本语言中,您可以将参数和参数作为function_name(parameter1, parameter2,…)传递给函数,这在shell脚本函数中不支持。在s...
    99+
    2022-07-29
    Shell函数传递参数 Shell传递参数
  • java多参数传递的方法是什么
    在Java中,可以使用以下几种方式来实现多参数的传递: 使用数组:可以将多个参数封装成一个数组,然后将数组作为方法的参数进行传递。...
    99+
    2024-02-29
    java
  • 向php传入参数的方法有哪些
    这篇文章主要讲解了“向php传入参数的方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“向php传入参数的方法有哪些”吧!向php传入参数的三种方法:1、使用“$argv”或者“$ar...
    99+
    2023-06-21
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现
    在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ---->...
    99+
    2024-04-02
  • Vue的指令中如何实现传递更多参数
    本篇内容主要讲解“Vue的指令中如何实现传递更多参数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue的指令中如何实现传递更多参数”吧!基本原理本文介绍的指令扩展方法,主要以闭包为基础,并且使...
    99+
    2023-06-30
  • C#线程传递参数实现方法
    这篇文章主要讲解了“C#线程传递参数实现方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“C#线程传递参数实现方法”吧!C#线程传递参数的实现是如何进行的呢?那么这里我们使用MyThread...
    99+
    2023-06-17
  • ajax传递多个参数具体实现方式
    这篇文章主要介绍“ajax传递多个参数具体实现方式”,在日常操作中,相信很多人在ajax传递多个参数具体实现方式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ajax传递多个...
    99+
    2024-04-02
  • Flask带参URL传值的实现方法
    目录Flask带参URL传值的方法定义一个包含动态路由的Flask处理类页面我们看控制台还有一种URL传值的格式接收参数的代码Flask传参定义id 及通过传参定义属性名称Flask...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作