elementui上传后隐藏
时间: 2023-10-21 08:05:05 浏览: 33
您可以通过设置 `show-file-list` 属性为 `false` 来隐藏上传后的文件列表。具体实现方法如下:
```html
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success">上传文件</el-button>
</el-upload>
```
相关问题
elementui上传成功隐藏组件
Element UI是一个基于Vue.js的UI组件库,提供了丰富的组件和功能。在Element UI中,上传组件的上传成功后默认是会显示上传成功的提示信息。如果需要隐藏上传成功的提示组件,可以通过以下方式实现:
1. 设置属性:可以通过设置upload组件的show-file-list属性为false来隐藏文件列表。代码如下:
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{tipText}}</div>
</el-upload>
2. 自定义样式:可以通过设置upload组件的自定义样式,将上传成功的提示信息隐藏起来。代码如下:
<style>
.el-upload-success {
display: none;
}
</style>
<template>
<el-upload
class="upload-demo"
action="/upload">
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{tipText}}</div>
</el-upload>
</template>
通过以上方法,可以实现隐藏Element UI上传成功的提示组件。
elementui隐藏上传框
elementui是一款基于Vue.js框架的组件库,其中包括了丰富的UI组件和丰富的功能和样式等等。其中,上传组件(upload)是elementui中非常常用的组件之一,在实际开发中,可能需要对上传框进行一些特定的操作,比如隐藏上传框。
要隐藏elementui的上传框,你可以使用自定义组件里的v-model属性,通过设置其值来控制上传框的隐藏和显示。在elementui中,可以使用upload组件的ref属性来获取上传组件的实例,进而控制其v-model属性的值。为此,你可以按照以下步骤实现上传框的隐藏:
1. 在模板中加入upload组件,设置ref属性。
<el-upload
ref="upload"
action="http://localhost:3000"
></el-upload>
2. 在方法中获取上传组件实例。
methods: {
hideUpload() {
this.$refs.upload.modelValue = [];
this.$refs.upload.clearFiles();
}
}
3. 通过改变v-model的值来隐藏上传框。
this.$refs.upload.modelValue = [];
4. 清空选择的文件,以免选择该文件后再次触发上传。
this.$refs.upload.clearFiles();
以上就是elementui隐藏上传框的方法,可以根据具体的业务需求进行实现。