使用element upload上传组件如何去掉删除按钮
作者:白开水z
这篇文章主要介绍了使用element upload上传组件如何去掉删除按钮
element upload上传组件去掉删除按钮
加个disabled 就可以了
效果图
element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
思路
上传成功以后,隐藏 .el-upload--picture-card 。
HTML部分
<el-upload :class="{hide_box: upload_btn}" :action="`#" list-type="picture-card" :on-success="handleSuccess" :auto-upload="true"> // 其他代码 </el-upload>
data部分
data() { return { upload_btn: false, // 是否隐藏上传图片按钮 }; },
methods 部分
// 上传成功 handleSuccess(response, file, fileList) { // 上传成功后,隐藏上传按钮 this.upload_btn = true; },
CSS 部分
.hide_box /deep/ .el-upload--picture-card { display: none; }
说明::on-success="handleSuccess" 这个是上传成功后触发,没成功不触发,如果没后台,只是想测试,可以换成 :on-change="handleSuccess",这个是状态修改后就触发
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- element el-upload文件上传覆盖第一个文件的实现
- 解决elementui上传组件el-upload无法第二次上传问题
- 关于Element上传组件beforeUpload上传前限制失效问题
- elementUI使用el-upload上传文件写法及避坑总结(上传图片/视频到本地/服务器及回显+删除)
- element-ui中el-upload多文件一次性上传的实现
- element-ui 中使用upload多文件上传只请求一次接口
- vue-cli3.0+element-ui上传组件el-upload的使用
- element-ui upload组件多文件上传的示例代码
- element UI upload组件上传附件格式限制方法
- 在vue项目中使用element-ui的Upload上传组件的示例
- Element中Upload组件上传功能实现(图片和文件的默认上传及自定义上传)