element-ui upload multiple多选时 Cannot set property ‘status‘ of null错误解决方案

在使用element-ui中的Upload组件时, 当我们需要手动修改fileList的时候会报错如下:
在这里插入图片描述
其实这是element组件告诉我们不能直接修改fileList的值。网上有罗列出几种方法来阻止组件的原生事件,实际上这些方法在指定上传文件可多选时是不可取的。这里我通过自己的踩坑,得出一下完美解决方案:

1.在data里面定义再一个变量uploadList用于操作fileList

在这里插入图片描述
这里我们定义的uploadList可用于更改fileList的值,并且传回给父组件或者做其他事情

2.上传成功回调里面给uploadList赋值

在这里插入图片描述
在这里我们用uploadListj接收每次上传成功之后回调的url,并处理其格式,最终将数据发送给父组件,供以使用。可以发现,这样控制台不再报错,同时父组件也接受到了正确的值!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui是一套基于Vue.jsUI组件库,提供了丰富的组件和工具,方便开发者进行项目开发。其中,下拉多选树状图是element-ui中的一个常用组件之一。 使用element-ui的下拉多选树状图组件,可以实现用户通过下拉选择框来选择多个选项,并且这些选项还以树状图的形式展示。这在处理包含层级关系的数据时尤其有用。 首先,在Vue组件中引入element-ui的下拉多选树状图组件,即el-select组件。然后,在组件中定义一个变量来存储用户选中的值,例如selectedOptions。接着,在挂载到DOM之前设置el-select组件的placeholder属性,如:请选择。 接下来,通过调用element-ui提供的API,将需要展示的选项作为树节点传递给el-select组件。可以使用element-ui的el-tree组件来支持树状结构,通过配置tree-props属性来指定树节点的显示字段,例如label和children。在数据源中,可以为每个节点设置一个唯一的key属性。 然后,在el-select组件的v-model属性中绑定selectedOptions变量,以实现选中值的双向绑定。此时,用户可以通过下拉选框选择多个选项,选中的选项会自动存储在selectedOptions变量中。 最后,在Vue组件的template中使用el-select组件来展示下拉多选树状图。设置el-select的filterable属性为true,可以让用户通过输入关键字来筛选选项。使用el-option组件来表示每一个下拉选项。为el-select组件设置多选属性multiple,并通过el-tree组件的子节点slot来显示树状结构。 通过以上步骤,我们就可以使用element-ui快速实现下拉多选树状图。使用这个组件,可以方便地展示具有层级关系的数据,并让用户灵活选择多个选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值