ElementUI框架中el-select组件添加filterable属性后，切屏操作select组件会自动焦点

实际情况对应的代码段：<!DOCTYPE html><html><head><title>test</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script><link rel="style

hopyGreat

5791人浏览 · 2021-01-06 17:41:31

hopyGreat · 2021-01-06 17:41:31 发布

实际情况对应的代码段：

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id=app>
  <template>
    <el-select v-model="value" filterable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
</div>

<script>
  let app = new Vue({
    el: "#app",
    data: {
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
    }
  })

</script>

</body>
</html>

在这段HTML中，点击一次select选择框之后会导致select组件获得焦点，并且如果后续在页面中没有其他操作，select组件不会失去焦点，在切屏返回后select组件会由于具有焦点而导致自动展开下拉列表。

这不算是el-select的bug，而是其本身设计就是如此。

解决方法需要用到el-select提供的另一个事件属性：visible-change

ElementUI如是说：

在select组件上监控一下这个事件，并在事件响应中添加相应的获得焦点或失去焦点的操作即可。

解决方案：

<el-select ref="select" v-model="value" filterable placeholder="请选择"
    @visible-change="visibleChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

在组件上添加ref="select"方便获取组件，以及事件@visible-change="visibleChange"。

添加方法：

let app = new Vue({
  el: "#app",
  data: {...
  },
  methods: {
    visibleChange(flag) {
      if (flag) {
        this.$refs.select.focus()
      } else {
        this.$refs.select.blur()
      }
    }
  }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^