首页 > 其他分享 >[Element UI 2.x] el-upload组件的部分事件属性传参在.jsx文件中失效的问题

[Element UI 2.x] el-upload组件的部分事件属性传参在.jsx文件中失效的问题

时间:2022-11-09 23:34:44浏览次数:71  
标签:传参 el upload Element UI 组件 jsx

在之前的开发工作经历中,基本会首选Antd、ant-design-vue、Vant做为前端工程的UI库。

今天在处理一个现有项目时,其UI库使用的是Element UI(2.15.10)。

在以JSX形式编写一个具有上传交互的组件时,发现给el-upload组件的'on-success'事件属性传递回调方法后,一直未成功响应。

// test 1
onSuccess={this.callback}

// test 2
on-success={this.callback}

对于传参失效的问题,查看了element-ui/packages/upload/index.vue中的源码

并在github的ElementUI库上搜索了相关issue

最终该问题得到了解决(以一个包含'props'属性的对象来传递一些特殊格式的参数):

// 参数体
{
  props: {
    'on-success': successCallback,
    'on-error': errorCallback,
  },
}

// 传递方式
<el-component
  ...
  {
    ...{
      props: {
        'on-success': successCallback,
        'on-error': errorCallback,
      },
    },
  }
  ...
/>

 

标签:传参,el,upload,Element,UI,组件,jsx
From: https://www.cnblogs.com/fanqshun/p/16875578.html

相关文章

  • [Bug0051]idea插件jrebel 运行报错JRebel-JVMTI [FATAL] Couldn‘t write to C:\User
    1、问题idea插件jrebel运行报错JRebel-JVMTI[FATAL]Couldn‘twritetoC:\Users\报错JRebel:Couldnotcreatelogfile:C:\Users\22611\.jrebel\jrebel.log(系......
  • excel表格自动生成序号
    前言:这个问题困惑好久,今天终于找到解决办法了。 输入起始数值在Excel表格中首个单元格中输入起始数值1。下拉填充将光标移动至单元格右下角变成十字时,拖动鼠标向下填......
  • 新的学习历程-python1 Hello World
    1print('helloworld!')2if2>0:3print('ok')4print('yes')56x=3;y=47print(x+y)学习资源来自:张志刚老师python百例 《例解Python:Pyth......
  • Datagrip2019.1.4导出导入数据,mysqldump: Couldn’t execute 'SELECT COLUMN_NAME
    1, 2,需要mysqldump.exe  安装mysql就有 3,安装Mysql8 需要添加禁用参数:--column-statistics=0 否则报错mysqldump:Couldn’texecute'SELECTCOLUMN_NAME......
  • MySql - 基础学习5 - select
    一.分页和排序--分页limit和排序orderby--排序;升序ASC,降序--升序SELECTs.`id`,`name`,`paw`,`gradename`FROMstudentASsINNERJOINgradeAS......
  • HDU 5434 Peace small elephant
    ProblemDescriptionXiaoMinglikesplayingtheinternationalchess,especiallyliketheelephant(itcanmovebyslantwhilenobarrier),buthethink......
  • SPOJ PHRASES Relevant Phrases of Annihilation
    DescriptionYouaretheKingofByteland.Youragentshavejustinterceptedabatchofencryptedenemymessagesconcerningthedateoftheplannedattackon......
  • POJ 1035 Spell checker
    DescriptionYou,asamemberofadevelopmentteamforanewspellcheckingprogram,aretowriteamodulethatwillcheckthecorrectnessofgivenword......
  • HDU 5722 Jewelry
    ProblemDescriptionAfterallthedifficulties,PsycheandCupidarefinallygettingmarried.NoordinarypearlscanholdCupid'sloveforPsyche.So......
  • Shell 脚本
    1、检测两台服务器指定目录下的文件一致性#!/bin/bash######################################检测两台服务器指定目录下的文件一致性####################################......