el-select既能当输入框，又能下拉选择，并解决el-select的blur方法不生效

最新推荐文章于 2024-08-20 17:41:03 发布

衬酸

最新推荐文章于 2024-08-20 17:41:03 发布

阅读量845

点赞数 10

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_39500287/article/details/135904346

版权

// 加上.capture.native就能解决啦
<el-form-item prop="auditMatters">
  <el-select v-model="editQuery.auditMatters" filterable placeholder="请选择或输入审计事项" clearable @change="handleSelect" @blur.capture.native="handleBlur" @clear="handleClear" :disabled="readonly">
    <el-option
      v-for="item in auditMattersOptions"
      :key="item.id"
      :label="item.matterName"
      :value="item.id"
    />
  </el-select>
</el-form-item>


handleBlur(e) {
  if (e.target.value !== '') {
    this.$set(this.editQuery, 'auditMatters', e.target.value)
  }
},
handleClear() {
  this.$set(this.editQuery, 'auditMatters', '')
},
handleSelect(val) {
  const name = this.auditMattersOptions.find(i => i.id == val).matterName
  this.$set(this.editQuery, 'auditMatters', name)
}