Vue的element UI关于el-upload的按钮和button不在同一行的解决
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
首先,我们知道,在upload组件里内置,slot标签以及trigger属性,可以保证各个按钮button在同一行。但是,存在两个问题:
①upload中的button总是在第一个位置,无论你怎么调整都是在第一个位置。
②upload中标签总是和相邻标签在一起。
①一但我们去掉trigger,即可恢复正常,但是会形成上下两行,所以应当给上传组件加一个css,并设置为inline-block。
②同时把其他的button写在upload组件外面,并可以去掉trigger属性。
③再对button的maigin进行间距调整即可
下面是修改后的代码,形成期待效果
<el-button @click="mzdc" size="mini" type="primary" :disabled="!enableFlag">mz下载</el-button>
<el-upload
class="inline-block"
:action="GLOBAL.apiBaseUrl+'/AiForecasting/uploadByStream?uploadFileName=kaList&uid=' + this.loginUserProfile.uid"
:on-success="handleKaListUploadSuccess"
:on-error="handleKaListUploadFail"
:on-change="handleKaListUploadChange"
:disabled="enableFlag==false?true:false"
ref="kaUp"
:limit="1">
<el-button @click="mzup" size="mini" class='margin-change' type="primary" :disabled="!enableFlag" >上传</el-button>
</el-upload>
<el-button @click="handleDownloadClick" size="mini" type="primary" :disabled="!enableFlag">下载</el-button>
.inline-block {
display: inline-block;
margin-right:10px;
}
.margin-change{
display: inline-block;
margin-left:10px;
}
效果如图片所示:




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:8 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)