vue2+Element--el-select组件添加filterable属性后,copy有相同数据后select组件自动聚焦

104 阅读1分钟

前提

el-select组件有添加filterable属性,@visible-change事件。

操作

两三个el-select选项框,选中第一个选项框选择对应内容month,然后切换到记事本去copy数据"year"或者“month”,就是options中有的数据,此时再切换到该页面,选项框会自动聚焦,下拉框自动弹出。

要求

copy后要求下拉框不自动弹出。

解决

@visible-change事件中手动控制下拉框的focus和blur事件。


<el-select
  v-model="value"
  filterable
  :filterable-methed="filterableMethed"
  ref="select"
  @blur="handleBlur"
  @visible-change="handleVisibleChange(...arguments,'select')"
  @change="handleChange"


  >
  <el-options key="month" value="month" label="month">month</el-options>
  <el-options key="year" value="year" label="year">year</el-options>
  <el-options key="day" value="day" label="day">day</el-options>
</el-select>
export default{
  data(){
    return {
      value:''
    }
  },
  methods:{
    // 异步修改
    handleVisibleChange(val,prop){
      if (val) {
        this.$refs[prop].focus()
      } else {
        this.$refs[prop].blur()
      }
      ...
    },
    // change事件
    handleChange(value){
      this.value = value
    },
    // 失去焦点
    handleBlur(){
      setTimeOut(()=>{
        this.$refs['select'].blur()
      },100)
    },
    // 模糊查询
    filterableMethed(keyword=''){
      ...
    },
    
  }
  
}

参考文献: