zoukankan      html  css  js  c++  java
  • 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)
    }

    @change添加自定义参数

    element-ui的change事件默认参数是一个value值,比如下拉框的change事件默认参数是选中的value值,但是实际项目中我们要传的一般不止这一个参数,如果直接追加两个参数可能获取不到,这时需要把参数中的默认参数名换成$event即可。

    //第一个参数是默认的value参数,第二个是我们自己想传入的参数
    
    @change='selectChange($event,scope.row)'
    
     
    
    或者使用第二种方法:
    
    @change='(val)=>selectChange(value,scope.row)'

     

  • 相关阅读:
    重学Docker
    rabbitmq基本知识了解
    rabbitmq之mq协议了解
    微信公众平台开发教程(三) 基础框架搭建
    微信公众平台开发教程(二) 基本原理及消息接口
    微信公众平台开发教程(一) 微信公众账号注册流程
    微信公众平台开发教程(十) 订阅号与服务号的区别
    vue cli3.0快速搭建项目详解(强烈推荐)
    vue 3.0 初体验 (项目搭建)
    手把手教你vue3.0项目搭建
  • 原文地址:https://www.cnblogs.com/liAnran/p/11395843.html
Copyright © 2011-2022 走看看