目录
el-form组件有时候不能输入问题
问题描述以及解决思路
在测试界面功能的时候,进行输入或者下拉选择等,会无法输入(选中),但是进行刷新之后再次进行该操作就可以了正常显示了,很奇怪,翻了翻官方文档好像也没有遗漏,毕竟el-form就是我复制粘贴过来的
然后就去问度娘了,然后原因在于 数据绑定(model)和 ref 的两者重名了,然后系统就找不对了,所以需要将两者其中一个改名字就好了 T-T
虽然我后来去翻了一下我原来写的,两者命名一样,但是也不影响输入或者选择
反正如果遇到之类情况,可以先让ref 和 model 绑定不同值
方案截图
el-upload到达上传限制后按钮禁用
问题描述以及解决思路
本来限制了文件只能上传一个,那么我就想着禁用了按钮,让他无法再次上传,但是禁用了按钮以后,发现打开文件夹的弹窗仍然能够出现,这不是我想要的结果,然后,我就去找万能的度娘了
网上有很多做法,但我试了发现没啥用,就还是会出现弹窗,要不然就是连删除操作都被禁用了,而删除操作是不能禁用掉的,因为功能是:在已上传的基础上修改的话,要先把原来的删了,再上传新的,只要有一张上传的,就不给再次上传
所以我就再次探索,找到了解决方案
就是对上传(选取)文件按钮的slot 进行修改!!
根据文档,slot = trigger 和 slot = tip 两者是完全不同的,terigger是出发弹窗的,而tip是提示文字而已,所以我们可以通过监听文件是否已经达到限制数量,如果是就将slot = trigger 改为 slot = tip ,并且按钮禁用,就可以达到效果
部分代码
《HTML》
<el-upload
class="upload-demo"
:action="getUploadUrl()"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:headers="headers" accept="image/*"
ref="upload" list-type="picture"
:limit="1"
:file-list="fileList"
:data="uploadData"
>
<el-button
size="small"
round
icon="el-icon-upload2"
type="primary"
:slot="showSubmitPic ? 'trigger' : 'tip'"
:disabled='!showSubmitPic'
>点击上传
</el-button>
<div slot="tip" class="el-upload__tip" style="color: red">
只能上传一张图片文件,若要修改请先删除原图,请注意图片不超过1MB
</div>
</el-upload>
《js》
// 在data中的变量声明就不写了
watch: {
fileList (val) {
if (val.length === 0) {
this.showSubmitPic = true
} else {
this.showSubmitPic = false
}
}
},
效果展示
禁用后再怎么点击按钮都无法打开弹窗了,并且可以删除原文件