首页 > 其他分享 >element ui中同级button调用upload组件

element ui中同级button调用upload组件

时间:2023-12-19 17:47:39浏览次数:34  
标签:button refname upload ui element refs

  1. 代码
  <el-upload
    ref="schoolLogo"
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <el-button class="upload_pic" type="primary" @click="toSelectFile('schoolLogo')">上传图片</el-button>
  methods:{ 
      toSelectFile(refname) {
        this.$refs[refname].$refs['upload-inner'].handleClick();
      }
  }

data自信补充或者看element ui官网

标签:button,refname,upload,ui,element,refs
From: https://www.cnblogs.com/DnmyCourage/p/17914317.html

相关文章

  • element-ui
    element真的好好用记录一下表单在Form组件中,每一个表单域由一个Form-Item组件构成,表单域中可以放置各种类型的表单控件,包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker<el-formref="form":model="form"label-width="80px"><el-form-itemlab......
  • 【POJ 2388】Who‘s in the Middle 题解(nth_element)
    描述FJ正在调查他的牛群,寻找最普通的奶牛。他想知道这头“中位数”奶牛产奶量:一半奶牛产奶的量与中位数相同或更多;一半的人给予同样多或更少。给定奇数头奶牛N(1<=N<10000)和它们的牛奶产量(1…1000000),求出所给牛奶的中位数,使至少一半奶牛所给的牛奶量相同或更多,至少一半奶牛的牛奶......
  • element-ui实现输入框千分位
    需求:1.支持v-model。2.支持el-input所有属性。2.失去焦点添加千位符。3.获取焦点去掉千位符。组件一组件GalaxyNumberInput<template><el-inputclass="galaxy-num-input"v-model="displayValue":size="size":clearable......
  • vue-element-ui 日期选择器 前后端联调
    前端:<el-col:span="8"><divclass="block"><el-col:span="4">交接日期</el-col><el-col:span="1"></el-col><el-col:span="16&quo......
  • python之tkinter的button控件
    按钮组件,用于监听用户行为,调用具体功能函数。按钮上可以是文字或者图片。语法:Button(master,option……)master父容器option参数参数:参数属性举例或备注bg按钮背景颜色 fg按钮前景颜色按钮上的文字颜色bd按钮边框大小边框会呈现立体感activebackground鼠标点击时按钮背景色 act......
  • 解决element-ui中el-tree懒加载load只执行一次问题
    在我们实际开发中,由于后端返回的节点数据量庞大,而用户往往没有要看到所有数据的需求,如果在页面加载中,将页面的所有节点数据都加载出来,无疑是浪费用户宝贵的时间,因此,就有了节点的懒加载的需求,用户想展开哪个节点,我们就给他展示什么数据(异步的从后台发送请求获取当前节点数据然后进......
  • element ui el-select下拉多选添加全选功能
    //html   <divclass="item">    <spanclass="label">观测要素</span>    <span>     <!--要素组批量处理-多选-->     <el-select v-model="eleTypeList"multiple@change="eleT......
  • Element Message相同文案重复提示处理
    import{Message}from'element-ui'letlastMessageText=nullletmessageTimer=nullexportdefaultfunctionshowMessage(options){ //如果新的消息与上一条消息相同,并且计时器还在运行,那么不显示新的消息 if(options.message===lastMessageText&&mess......
  • Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
    1、需求使用Vue+ElementUI实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。2、实现1)列表页index.vue<el-table><!--其他列--><el-table-columnlabel="操作"width="150"><templateslot-scope=......
  • Android MaterialButtonToggleGroup使用
    原文地址:AndroidMaterialButtonToggleGroup使用-Stars-One的杂货小窝觉得单选框不好看,发现了一个Material里的单选按钮组,感觉UI还不错,记下使用使用效果:使用前,得看看是否有material的依赖,如implementation'com.google.android.material:material:1.4.0'PS:......