vue2+Element--点击多个el-select下拉框，出现重叠问题

2024-05-24 256 阅读1分钟

问题描述

el-table 中的多个el-select下拉框，点击出现上一个下拉框不隐藏，下一个下拉框继续显示，出现重叠问题。

el-table 中的el-select 只有点击table外才会失去焦点,隐藏下拉框，需要添加blur事件使其失焦
el-select添加了blur事件后，v-model 数据没有更新问题
el-select下拉框同时使用blur和change事件冲突问题

解决

在select标签内添加 ref，ref不能一样
blur事件上的代码改成异步的形式，比如说加个setTimeout

handleBlur(prop){
  setTimeOut(()=>{
    this.$refs[prop].blur()
  },100)
}

<el-select 
  v-model="scope.row.type"
  :ref="'list' + scope.$index + 'type'"
  @blur="handleBlur('list' + scope.$index + 'type')"
>
  ....
</el-select >

参考文献