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
  }
}
相关推荐
H@Z*rTE|i18 小时前
elementUi 当有弹窗的时候提示语被覆盖的问题
前端·javascript·elementui
阿奇__18 小时前
vue2+elementUI table多个字段排序
前端·javascript·elementui
J总裁的小芒果19 小时前
原生Table写一行保证两条数据
javascript·vue.js·elementui
沐墨染1 天前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
南玖i1 天前
SuperMap iServer + vue3 实现点聚合 超简单!
javascript·vue.js·elementui
麻瓜呀2 天前
vue2之el-table表格多选改单选
javascript·vue.js·elementui
weixin_584121432 天前
vue3+elementui+js自定义穿梭框布局
javascript·vue.js·elementui
qq_401967383 天前
element-plus table组件 封装列隐藏功能,并非 v-if 或 v-for,通过tableRef 与样式控制
javascript·vue.js·elementui
web小白成长日记3 天前
Vue3+ElementUI树形菜单:构建层次化用户界面
前端·microsoft·ui·面试·elementui
FFF_634560234 天前
自定义下拉框组件
javascript·vue.js·elementui