iView后台管理系统clearable清空select操作后参数丢失问题解决方案

问题发生在iview-admin后台：

 

当使用clearable进行清除select下拉框内数据操作后，再进行搜索操作,此时会发现搜索列表传参内select对应的参数被莫名删除了（只针对select组件，对input无影响）

通常做法会在搜索请求之前进行判断 若请求参数 == undefined 重新赋值，不过下拉框过多的时候需要进行大量判断，太过冗余复杂，不太实用

    // 获取首屏数据
    async getList() {

      this.userManageTable = true

      if (this.userManageDataForm.role == undefined) {
        this.userManageDataForm.role = -1
      }

      if (this.userManageDataForm.sex == undefined) {
        this.userManageDataForm.sex = -1
      }

      if (this.userManageDataForm.isVest == undefined) {
        this.userManageDataForm.isVest = -1
      }

      const res = await getUserManagenentList(this.userManageDataForm)

    }

iview官网api有个  on-clear 回调，完美解决该问题:

api地址： https://www.iviewui.com/components/input

elementUI也有类似的回调，就是名称不一样：

api地址： https://element.eleme.cn/#/zh-CN/component/input

---

整体代码核心部分如下：

          <FormItem :label-width="110"
                    label='是否开启活动价：'>
            <Select v-model="formInline.isActivity"
                    @on-clear="selectClear('isActivity')"
                    label="请选择"
                    clearable
                    style="width:150px">
              <Option v-for="(item,index) in isActivityArr"
                      :value="JSON.stringify(index+1)"
                      :key="index">{{ item }}</Option>
            </Select>
          </FormItem>

          <FormItem :label-width="100"
                    label='小程序上下架：'>
            <Select v-model="formInline.isOut"
                    @on-clear="selectClear('isOut')"
                    label="全部"
                    clearable
                    style="width:150px">
              <Option v-for="(item,index) in isOutArr"
                      :value="JSON.stringify(index)"
                      :key="index">{{ item }}</Option>
            </Select>
          </FormItem>

          <FormItem :label-width="90"
                    label='内部上下架：'>
            <Select v-model="formInline.isInnerOut"
                    @on-clear="selectClear('isInnerOut')"
                    label="全部"
                    clearable
                    style="width:150px">
              <Option v-for="(item,index) in isOutArr"
                      :value="JSON.stringify(index)"
                      :key="index">{{ item }}</Option>
            </Select>
          </FormItem>

          <FormItem :label-width="90"
                    label='赠品上下架：'>
            <Select v-model="formInline.isGiftOut"
                    @on-clear="selectClear('isGiftOut')"
                    label="全部"
                    clearable
                    style="width:150px">
              <Option v-for="(item,index) in isOutArr"
                      :value="JSON.stringify(index)"
                      :key="index">{{ item }}</Option>
            </Select>
          </FormItem>

Js函数回调如下：

    selectClear(res) {
      // 活动价传值特殊处理
      // 没开活动价：1   ；
      // 开了活动价 ：2  ；
      // 空参数传：0

      this.$nextTick(() => {
        console.log(res, this.formInline[res])
        // this.formInline[res] = res == 'isActivity' ? 0 : ''
        // clearable后会直接把forminline里的该字段删除掉
        this.$set(this.formInline, res, res == 'isActivity' ? 0 : '')
        console.log(this.formInline)
      })
    },

效果如下：

值得一说的是：clearable是在赋值之后执行，所以采用nextTick，否则不生效