ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

elementUi——组件函数钩子自带参数,不能添加参数问题

2019-08-22 17:57:30  阅读:203  来源: 互联网

标签:beforeRemove elementUi 钩子 fileList data 参数 file 上传


  在element-ui中的组件函数钩子一般都是自带参数如:

//上传组件
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

  API中解释:on-remove 文件列表移除文件时的钩子 function(file, fileList)
  也就是上面的beforeRemove函数自带file, fileList这两参数

beforeRemove(file, fileList){
//就这两参数
}

  那么想要带自己的参数呢,,尤其一般在表格中的上传,肯定要携带当前一行的参数(动态参数)时;
  我们对before-remove属性修改:

//上传组件
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="(file,fileList)=>{
     return beforeRemove(file,fileList,data)
}"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

  在before-remove上在return 一个函数,并携带data(自己想要的参数)
  这样在函数beforeRemove中就可以拿到data了

beforeRemove(file,fileList,data){
    console.log(data)
}

 

标签:beforeRemove,elementUi,钩子,fileList,data,参数,file,上传
来源: https://www.cnblogs.com/liAnran/p/11395843.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有