[JavaScript知识库] Vue的element UI关于el-upload的按钮和button不在同一行的解决

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue的element UI关于el-upload的按钮和button不在同一行的解决 -> 正文阅读

[JavaScript知识库]Vue的element UI关于el-upload的按钮和button不在同一行的解决

首先，我们知道，在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;
         }

效果如图片所示：
在这里插入图片描述