The iView Select selector component solves the clearable option and the bound parameters are deleted

Problem Description

Use the Select component in iView in the Vue project, use clearablethe clear option, and find that the parameter bound by the component is deleted when requesting the interface, and the parameter is not passed to the backend.

Solution

Add on-clearan event to the Select component and trigger the method when the clear button is clicked.
Guidance official document: Select selector

//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, '')
     })
 },

This method is a method in the Vue component, which is used to clear the value of the specified property in the content object.
The parameter res of the method indicates the attribute name that needs to be cleared.
The implementation steps of the method are as follows:
In the Vue component, if you need to modify a certain property of the object, you need to use this.$set()the method, otherwise Vue cannot monitor the change of this property. Therefore, in this method, we first call this.$nextTick()the method to wait for the DOM update to complete.
After waiting for the DOM update to complete, we call this.$set()the method to clear the value of the specified attribute in the content object. If the incoming parameter res is 'type', set the value of the type attribute to an empty string; otherwise, set the value of the res attribute to an empty string.
If it is helpful to you, please remember to click triple link