隐藏elementPlus中upload组件的上传框

vue3项目中使用element Plus的upload上传组件,要求上传后隐藏上传框,只有图片,话不多说,直接上代码。

<el-upload
	action="#"
	:limit="1"
	list-type="picture-card"
	:auto-upload="false"
	:class="{ disabled: isShow }"
	@change="handleImageChange"
>
	<el-icon><Plus /></el-icon>
								
</el-upload>

为这个组件动态添加类disabled,对应的CSS样式为

.disabled .el-upload--picture-card {
	display: none !important;
}

思路:为上传组件整个div添加类disabled,上传组件下的类el-upload--picture-card样式隐藏,这个类即为上传框,而不隐藏这个上传组件,导致图片连带被隐藏。打开控制台查看元素样式了解。

其中isShow自己声明为ref对象,根据业务逻辑去定义值何时为true何时为false。

如果样式不生效,有时scpoed也没用,在.disabled前面加上::v-deep即可。

好的,以下是一个使用Element Plusupload上传文件,并将文件名展示在表格的示例代码: ```html <template> <div> <el-upload class="upload-demo" action="/your-upload-api" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" :auto-upload="false" > <el-button size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" :disabled="!file">上传文件</el-button> <span style="margin-left: 10px;">上传的文件名: {{ file ? file.name : '' }}</span> </el-upload> <el-table :data="tableData"> <el-table-column prop="name" label="文件名"></el-table-column> </el-table> </div> </template> <script> import { ref } from 'vue' import { ElUpload, ElButton, ElTable, ElTableColumn } from 'element-plus' export default { components: { ElUpload, ElButton, ElTable, ElTableColumn }, setup() { const file = ref(null) const tableData = ref([]) const beforeUpload = (file) => { // 判断文件是否为图片格式 const isImage = file.type.startsWith('image/') if (!isImage) { this.$message.error('只能上传图片文件!') return false } return true } const handleSuccess = (response, file) => { tableData.value.push({ name: file.name }) file.value = null } const handleError = (error, file) => { this.$message.error('上传失败!') file.value = null } return { file, tableData, beforeUpload, handleSuccess, handleError } } } </script> ``` 这段代码,我们使用了Element Plus的`el-upload`组件实现文件上传功能,使用`before-upload`属性进行文件格式验证,使用`on-success`属性在上传成功后将文件名添加到`tableData`,并且将`file`置为`null`,以便用户上传下一个文件。同时,我们使用`ref`函数创建了`file`和`tableData`的响应式引用,在模板展示出来。最后,我们使用了`el-table`组件和`el-table-column`组件来展示文件名。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值