element-ui plus 文件上传组件,设置单选,并支持替换和回显

遇到的坑:

1、设置limit属性为1后,on-change属性不生效

2、on-exceed属性虽然值改变,但是回显没有随之变化

3、由于element-ui plus版本file-list值出现问题

最后的解决方案决定不设置 limit 属性,通过 on-change 中的判断来控制数量。

根据网友的说法,element-ui plus 高于 2.2.9 将 :file-list="fileList" 改为 v-model:file-list="fileList"

最终代码:

bash 复制代码
 <el-upload
     ref="uploadRef"
     class="upload-demo"
     :auto-upload="false"
     v-model:file-list="fileList"
     :on-change="handleFileChange"
  >
    <template>
       <el-button type="primary">选择文件</el-button>
       </template>
</el-upload>
bash 复制代码
function handleFileChange (file, files) {
  if (files.length > 1) {
    fileList = [files[files.length - 1]]
  } else {
    fileList = files
  }
}
相关推荐
邂逅星河浪漫21 小时前
【Vue2-ElementUI】:model、v-model、prop
javascript·vue.js·elementui
cypking5 天前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
wangjinsheng5935 天前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程
easyboot5 天前
使用element-plus的暗黑模式
javascript·vue.js·elementui
1314lay_10076 天前
Element Plus左侧侧边栏按照屏幕宽度来确定显示和隐藏,如果太小的话,侧边栏消失,菜单会变成一个小按钮,点击按钮以模态框弹出
javascript·vue.js·elementui
赢乐6 天前
前端vue表格el-table或a-table合并行的功能实现
elementui·el-table·element-plus·anti-design-vue·a-table·vue前端·表格合并行
诸葛亮的芭蕉扇7 天前
tooltip-position-solution
前端·vue.js·elementui
EstherNi7 天前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
卡梅德生物小喇叭8 天前
卡梅德生物技术快报|基于 CHO 细胞的百日咳毒素中和抗体检测方法构建与验证
人工智能·经验分享·elementui·微信公众平台·facebook
蜡台8 天前
Vue2 elementui2 中 el-switch 实现先判断改变状态
前端·vue.js·elementui·el-switch