iView Select选择器组件解决clearable清空选项后绑定的参数被删除

保持好运

已于 2023-05-12 13:57:55 修改

阅读量768

点赞数 2

文章标签： view design javascript vue.js

于 2023-04-27 15:10:15 首次发布

本文链接：https://blog.csdn.net/weixin_49098968/article/details/130118685

版权

在Vue项目里，使用iView的Select组件并设置clearable时，清除选项不会更新绑定的参数。为了解决这个问题，可以通过添加on-clear事件并在方法中使用this.$nextTick和this.$set来确保属性值被正确清空。例如，定义`typeClear`方法，利用`this.$set(this.type,res,)`来清空指定属性。

摘要由CSDN通过智能技术生成

问题描述

在Vue项目里使用iView里的Select组件，使用clearable清空选项，在请求接口时发现组件绑定的参数被删除了，并不将该参数传递给后端了。

解决办法

给Select组件添加on-clear事件，点击清空按钮时触发的方法。
指路官方文档：Select选择器
在这里插入图片描述

//html部分
<Select  @on-clear="clearType('type')"  v-model="type" placeholder="请选择类型" clearable>
     <Option v-for="item in type" :value="item.value" :key="item.value">
         {{ item.label }}
     </Option>
 </Select>


//js部分
typeClear(res) {
     this.$nextTick(()=>{
         this.$set(this.type, res, '')
     })
 },

这个方法是Vue组件中的一个方法，用于清空content对象中指定属性的值。
方法的参数res表示需要清空的属性名。
方法的实现步骤如下：
在Vue组件中，如果需要修改对象的某个属性，需要使用this.$set()方法，否则Vue无法监听到这个属性的变化。因此，在这个方法中，我们首先调用了this.$nextTick()方法，用于等待DOM更新完成。
等待DOM更新完成后，我们调用this.$set()方法将content对象中指定属性的值清空。如果传入的参数res为’type’，则将type属性的值设置为空字符串；否则，将res属性的值设置为空字符串。
如果对你有所帮助，请记得一键三联哦