Vue的element UI关于el-upload的按钮和button不在同一行的解决

首先,我们知道,在upload组件里内置,slot标签以及trigger属性,可以保证各个按钮button在同一行。但是,存在两个问题:
①upload中的button总是在第一个位置,无论你怎么调整都是在第一个位置。
②upload中标签总是和相邻标签在一起。

在这里插入图片描述

①一但我们去掉trigger,即可恢复正常,但是会形成上下两行,所以应当给上传组件加一个css,并设置为inline-block。
②同时把其他的button写在upload组件外面,并可以去掉trigger属性。
③再对button的maigin进行间距调整即可

下面是修改后的代码,形成期待效果

mz下载

                         上传
 
                      下载
 .inline-block {
        display: inline-block;
        margin-right:10px; 
        }
        .margin-change{
         display: inline-block;
        margin-left:10px;
         }

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

你可能感兴趣的:(vue,vue,vue.js)