前端element-ui el-upload和el-button放置同一行

最新推荐文章于 2023-12-22 11:04:23 发布
最新推荐文章于 2023-12-22 11:04:23 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 css html 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35011890/article/details/124127886
版权

CSS

<style type="text/css">
    .inline-block {
  display: inline-block;
}
</style>

html

<el-button v-if="data_object.is_add" type="primary" size="mini" @click="addInit" style="margin-left:10px">新增</el-button>
					            <el-upload class="upload-demo inline-block margin-right-10" :action="importUrl"  :show-file-list="false" :multiple="false" :limit="1"  :on-success="upLoadSuccess">
  										<el-button  v-if="data_object.is_add" type="primary" size="mini"  @click="importWarehouseBasicData">导入</el-button>
								</el-upload>

在这里插入图片描述

在这里插入图片描述

来源：
https://blog.csdn.net/weixin_42636552/article/details/91510581

幼稚怪
关注
专栏目录
Element-UI中Upload上传文件前端缓存处理示例
10-17
以下是一个关于如何在Element-UI的Upload组件中处理前端文件缓存的示例。 首先，我们需要一个变量来存储JSON文件的内容，例如`jsonContent`。我们的目标是让用户选择一个本地文件，然后将该文件的内容读取为JSON并...
Element-UI 上传按钮和普通按钮在同一行对齐显示
weixin_47633384的博客
05-08 938
使用upload组件时，按钮换到下一行。解决办法。
vue el-upload组件改造，下载和删除在同一行
qq_37497275的博客
03-29 391
1. 初始化组建的时候执行下面的代码。
upload按钮与button按钮在一行
weixin_44979475的博客
08-23 700
添加style样式：style="display: inline-block"
Vue的element UI关于el-upload的按钮和button不在同一行的解决
qq_44267691的博客
04-13 9459
首先，我们知道，在upload组件里内置，slot标签以及trigger属性，可以保证各个按钮button在同一行。但是，存在两个问题： ①upload中的button总是在第一个位置，无论你怎么调整都是在第一个位置。 ②upload中标签总是和相邻标签在一起。 ①一但我们去掉trigger，即可恢复正常，但是会形成上下两行，所以应当给上传组件加一个css,并设置为inline-block。 ②同时把其他的button写在upload组件外面，并可以去掉trigger属性。 ③再对button的maigi
element上传解决el-upload与普通按钮el-button平行问题
qq_34103387的博客
11-20 6245
element上传解决el-upload与普通按钮el-button平行问题 效果图： 代码展示：按钮放入el-upload如果不是submit容易出现上传弹出框 <el-upload class="upload-demo" ref="upload" action="#" :on-preview="handlePreview" :on-remove="handl...
element-ui上传按钮与普通按钮放置在一行
热门推荐
默默的笔记
06-12 2万+
element-ui组件中，文件上传按钮是由el-upload控制的，普通的按钮是el-button，在使用时，如果不加以修饰，往往会分两行的形式存在，如图： 代码如下： <el-row class="padding-10-0"> <el-upload :on-success="handleSuccess" :show-file-lis...
el-upload 按钮与普通按钮一行显示（element-ui）
然而老干妈早就看穿了一切
12-10 4999
参考文章：https://blog.csdn.net/weixin_30698527/article/details/94971098?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.co
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在Vue.js开发中，Element UI 是一款非常流行的前端UI库，它提供了丰富的组件，使得开发者能够快速构建美观的用户界面。在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-...
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
12-03
在Vue2.0中，Element-UI库提供了一个强大的组件`el-upload`，用于处理文件上传功能。在本文中，我们将深入探讨如何解决在`before-upload`方法返回`false`时，`submit()`方法不生效的问题，以及如何在取消上传时仅...
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
总之，通过上述步骤和代码示例，我们可以方便地在Vue2.0项目中集成Element-UI的upload组件，并实现图片的上传和预览功能。该组件大大简化了文件处理流程，并提供了友好的用户交互体验。对于需要在Web应用中实现文件...
vue element上传文件并使上传文件按钮和其他按钮显示在同一行
Guoxuxinwen的博客
03-11 2775
vue element上传文件并使上传文件按钮和其他按钮显示在同一行 <el-form> <el-form-item > <!-- 文件上传按钮 --> <el-upload class="upload-demo" action="http://localhost:9002/educenter/member/upImg" :on-preview="handlePreview" :on-
关于element-ui并列几个el-upload并排的问题
sxs_smile的博客
02-26 5729
遇到一个贼麻烦的客户，就不停的给你加需求。然后就出现一个订单要完成需要导3次的问题。然后element-ui一直困扰我的就是这个el-upload的布局问题，一个如果一个upload里边有几个button，不管slot="trigger"的button在第几位一定就排到第一位了，另一个就是他的自动换行。 再界面本来就很拥挤的情况下，我必须得把三个upload放到一行，但是用个div包起来几个upl...
vue上传按钮和上传文件在一行显示
weixin_45437417的博客
05-20 1855
.upload-demo >>> .el-upload-list{ display: inline-block; transform: translateY(8px) } 结果如图显示：：
在 el-table 中嵌入 el-checkbox el-input el-upload 多组件，实现复杂业务场景
web-Danli的博客
11-17 1895
表格“属性”列由 多选框checkbox、输入框input、 图片上传upload 等组件组成，从代码可看出 checkbox-group 包裹 input等组件，所以当在输入框输入或点击上传图片等操作时，都会触发勾选/取消勾选多选框。在实现的过程中，我还碰到一个输入框不能输入的问题，我操作输入之后，没有动静，再点击勾选操作时就可以正确显示出来了。时，你会发现，操作点击时不会触发弹出选择文件窗口，这是因为加了阻止冒泡后没有触发到选择文件的操作，这就需要我们自己在事件处理中写逻辑去触发。
el-select下拉框和el-button绑定情况，用户选择不同下拉框，按钮显示不同？
极客鼠之家
08-21 1536
1、效果图 2、代码 <template> <div> <el-form :model="form"> <el-form-item label="交易方向" prop="selectBsFlag"> <el-select v-model="form.selectBsFlag" placeholder="请选择交易方向" @change="selectB
关于如何通过elementui的下拉框（el-select）实现同组共同选择、不同组互斥的简单实现
最新发布
weixin_56528615的博客
12-22 842
这个testGroupSelect的数据结构还蛮奇怪的，在后端如果要从id1 , k1 、 id2 , k2这样的结构转过来还挺费劲，下面贴上我的转换方法。
element ui控制一行两个元素
weixin_45966674的博客
08-27 2736
然后我们可以通过 .el-form–inline .el-form-item的flex: 1 0 40%;来控制 40是一行两个。有些ui图会要求我们一行固定展示多少个 我这边要求的是一行展示liangge。需要在你的组件data中加上我这里用的变量 不然会报错的。当然 如果你要直接考我的代码。界面部分可以参考一下我写的。然后就会变成这样的效果。当我们把四十改成三十。
element-小技巧-上传组件el-upload转换为普通按钮，与其他按钮并排显示（没有边框包裹）
路漫漫其修远兮
03-16 3928
目录 1.问题描述 2.解决方式 2.1添加下面css样式 2.2设置上传组件不显示上传文件列表 1.问题描述 在使用el-upload时，组件会自带一个矩形范围，而不是一个单纯的按钮。无法与其他按钮并排显示，如下图 如何让上传组件与按钮并排显示，如下图 箭头所指的是一个el-upload 2.解决方式 2.1添加下面css样式 <style scoped> /deep/ .el-upload { display: inline;
结合element-ui 的el-upload组件支持分片上传
05-17
Element-UI 的 el-upload 组件本身并不支持分片上传，但是我们可以通过使用第三方库来实现分片上传的功能。 一种常见的方案是使用 axios 库来进行文件上传，并在上传时使用 axios 的分片上传功能。axios 库已经内置了分片上传的支持，我们可以使用 axios 的 `axios.post` 方法来上传文件，并使用 `onUploadProgress` 方法来监听上传进度。 首先，我们需要在项目中安装 axios 和 element-ui： ``` npm install axios element-ui --save ``` 然后，我们可以在组件中使用 el-upload 组件来上传文件，如下所示： ```html <template> <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :headers="headers" :on-success="handleSuccess" :on-error="handleError" :on-progress="handleProgress" :file-list="fileList" :limit="limit" :multiple="multiple" :data="formData" :auto-upload="autoUpload" :show-file-list="showFileList" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> ``` 其中，我们需要设置 `action` 属性为文件上传的接口地址，同时需要设置 `on-success`、`on-error` 和 `on-progress` 等事件来处理上传成功、上传失败和上传进度。 接下来，我们可以在组件的 `mounted` 钩子函数中初始化 axios 并设置分片大小： ```js import axios from 'axios'; export default { name: 'UploadDemo', data() { return { fileList: [], uploadUrl: 'http://example.com/upload', limit: 3, multiple: true, formData: {}, autoUpload: true, showFileList: true, headers: {}, chunkSize: 5 * 1024 * 1024 // 5MB }; }, mounted() { axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; axios.defaults.timeout = 60000; // 超时时间 axios.defaults.retry = 3; // 重试次数 axios.defaults.retryDelay = 1000; // 重试间隔 // 设置分片大小 axios.defaults.maxContentLength = this.chunkSize; axios.defaults.maxBodyLength = this.chunkSize; }, methods: { // 上传文件 handleUpload(file) { const formData = new FormData(); formData.append('file', file); return axios.post(this.uploadUrl, formData, { headers: this.headers, onUploadProgress: progressEvent => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(percentCompleted); } }); }, // 上传成功回调 handleSuccess(response, file, fileList) { console.log('上传成功:', response); }, // 上传失败回调 handleError(error, file, fileList) { console.log('上传失败:', error); }, // 上传进度回调 handleProgress(event, file, fileList) { console.log('上传进度:', event.percent); } } }; ``` 在 `handleUpload` 方法中，我们使用 axios 的 `post` 方法来上传文件，并设置了 `onUploadProgress` 方法来监听上传进度。在 `mounted` 钩子函数中，我们设置了 axios 的默认参数，包括超时时间、重试次数、重试间隔和分片大小等。 需要注意的是，由于 el-upload 组件不支持分片上传，因此我们需要手动控制上传的文件数量，以避免同时上传过多的文件导致服务器崩溃。我们可以通过设置 `limit` 属性来控制上传的文件数量，例如设置为 3 表示一次最多只能上传 3 个文件。 另外，如果需要支持断点续传，我们需要在上传文件时记录已上传的文件块数量和位置，并在下次上传时从上次的位置继续上传。这部分内容比较复杂，需要根据具体的需求来实现，这里不再赘述。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值