vue中使用element组件时事件想要传递其他参数的问题

2024-04-10 01:10:48

在使用element的上传组件时在一下几个钩子中传递其他参数

图中是文件上传时的几个钩子，参数为文件或文件列表或者其他参数，但是现在我想在原有参数上传递其他参数。比如我想在on-success的钩子中传递一个自定义参数i，原本是这样写的：

:on-success=”handleSuccess（i）” //handleSuccess是一个方法

但是发现这样写取不到自身原来的参数，后来在网上找到了一个比较好的方法，如下：

:on-success=”(value)=> handleSuccess(i, value)”

这样就既可以获取到原有的参数又可以获取自定义传递的参数，下面是自己的使用方法：

<el-upload
class="upload-demo"
:action="GLOBAL.upFileUrl"
:data="uploadData"
:before-upload="fileSizeFiltering"
:on-success="(response, file, fileList)=>handleUpSuccess(response, file, fileList,i)"
:on-remove="(file, fileList)=>handleRemoveFile(file, fileList,i)"
:file-list="item.uploadFileList"
v-model="item.pushUpFileId"
:limit="5"
style="display: inline-block;">
<div class="addFile"></div>
</el-upload>

同理默认参数是event的事件要传递其他事件也是这样

<ul>
  <li v-for="item in list" @contextmenu="(e)=>showMenu(e,item.cd)" style="height:100px;">
   {{item.na}}
  </li>
  </ul>

总结

以上所述是小编给大家介绍的vue中使用element组件时事件想要传递其他参数的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue系列：通过vue-router如何传递参数示例

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na
在vue2.0中引用element-ui组件库的方法

在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网: http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要
vue中Npm run build 根据环境传递参数方法来打包不同域名

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me
vue2.0 使用element-ui里的upload组件实现图片预览效果方法

1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件 <el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'> <el-button size="small" type="primary">点击上传</el-button> <di
详解vue嵌套路由-params传递参数

在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app">  <router-view></router-view> </div> main.js params传值是通过 :[参数值]
基于vue-element组件实现音乐播放器功能

最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下演示地址 https://github-laziji.github.io 效果使用到的组件 element组件布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio 实现代码更详细的实现可以看 https://github.com/GitHub-Laziji/vblog <template>
vue的安装及element组件的安装方法

一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好
vue基于element的区间选择组件

公司的系统中,产品经理在设计时经常要求对某个字段进行区间阈值设置或者作为筛选条件.但是苦于element中没有非常契合的组件(slider组件并不支持两端均能设定),于是自己动手造了一个. 成果最终的展示效果如下: 需求这里以项目的需求为例,基本的需求如下: 分为左右值,包含左右值,正整数左侧必须大于等于1,右侧不得大于100000,右侧值必须不小于左侧默认:左侧20,右侧100000,均必填失焦校验页面和表单校验结构一样: <el-form ref="form" :
vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

vue中使用element组件时事件想要传递其他参数的问题

相关推荐

随机推荐