关于el-form组件有时候不能输入问题和el-upload到达上传限制后按钮禁用

最新推荐文章于 2024-12-09 14:50:08 发布

原创最新推荐文章于 2024-12-09 14:50:08 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

ElementUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的el-form组件输入异常及el-upload上传限制后仍能打开文件选择弹窗的问题。针对el-form组件无法输入的情况，原因是数据绑定(model)与ref重名，解决方案是确保两者命名不一致。而对于el-upload，当文件达到上传限制后，通过监听fileList长度改变，动态修改上传按钮的slot，从而实现禁用并阻止弹窗出现。通过这种方式，实现了上传功能的完善控制。

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
      }
    }
  },