el-select关于@blur失去焦点的坑

最新推荐文章于 2024-08-15 19:07:35 发布

山谷里的杂货铺

最新推荐文章于 2024-08-15 19:07:35 发布

阅读量7.1k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58528200/article/details/121671550

版权

今天使用el-select的@blur方法,发现第一次选择失去焦点后,没获取到选择的值(e.target.value)

解决方法:

1 采用计时器

<el-select v-model="scope.row.targetId" 
                  :disabled="disabled" 
                  clearable 
                  placeholder="请选择"
                  filterable
                  automatic-dropdown
                  @blur="blurSelect">
                  <el-option v-for="(item,index) in fileType"
                    :key="index"
                    :label="item.name"
                    :value="item.targetId" />
                </el-select>

// el-select失去焦点必填校验
    blurSelect(e) {
      setTimeout(()=> {
        if(!e.target.value) {
          this.$message.warning('请选择必填项!')
        }
      },1000)
    },

2 采用focus来获取blur

<el-select
          v-model="scope.row.targetId"
          ref="fuzzySearch"
          multiple
          placeholder="请选择"
          filterable
          automatic-dropdown
          @focus="focusSelectValue"
        >
          <el-option v-for="(item,index) in fileType"
                    :key="index"
                    :label="item.name"
                    :value="item.targetId" />
        </el-select>

focusSelectValue() {
        console.log(this.$refs.fuzzySearch);
        this.$refs.fuzzySearch.$refs.input.blur = () => {
          console.log(this.$refs.fuzzySearch.$refs.input.value);
        };
      },