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

Posted 2022-08-15 lianran

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