微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

  在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)
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐