iview的select组件clearable事件无效

Question

 <Select size="small" v-model="confData.comId" placeholder="Select"
                        clearable @input="changeVal" @on-clear="clearComId">
                  <Option v-for="(task,i) in companies" :value="task.id" :key="task.id">
                    {{task.name}}
                  </Option>
                </Select>
                
                

可是页面上没有那个X

---

computed: {
      companies () {
        let companies = []
        if (this.confData.taskConfigProcessId && this.confData.taskConfigProcessId !== null) {
          let data = this.$store.state.config.processes.find(item => {
            return item.id === this.confData.taskConfigProcessId
          })
          data = this.$store.state.config.comProcessAndRole.filter(item => {
            return item.id === data.comId
          })
          this.confData.comId = this.__utils.cloneDeep(data[0].id)
          companies = data
        } else {
          companies = this.$store.state.config.comProcessAndRole
        }
        return companies
      },
}

companies的JSON:

[{
"id": 23,
"name": "DW",
"allRoleList": [{
    "id": null,
    "comId": null,
    "configProcessId": null,
    "taskConfigId": null,
    "companyRoleId": 17,
    "companyRoleName": "美国操作",
    "createDate": null,
    "createUserId": null,
    "updateDate": null,
    "updateUserId": null
}...]},....]

Answer 1

你companies数据结构是什么样的呢

Answer 2

使用官方的demo测试了下，确实清空事件没触发。可能是个BUG，不过 可以用另一个方法触发，使用watch监听值

watch: {
    'confData.comId'(val){
        if(!val){
            console.log('数据为空')
        } else {
            
        }
    }
}