1.我使用回车提交数据,但是我在选择下拉菜单后,虽然提交了请求,但是element ui 的元素会处于聚焦状态你的回车会是的下拉框再次下拉下去(可自行去element select 组件 尝试)

于是我就想到解决办法,像在下拉change时间后,转移焦点,将焦点转移到输入框。

 <el-input
          ref="input"
          placeholder="添加日程至“今日日程”,回车即可创建"
          v-model="formData.planName"
          class="add-input"
          @keyup.enter.native="addHandler"
        >
          <el-select
            v-model="formData.urgentLevel"
            slot="append"
            placeholder="请选择"
            @change="selectChange"
          >
            <div slot="prefix" class="define-prefix">
              <div v-for="(item,index) in 3" :key="index+'count'">!</div>
            </div>
            <el-option label="紧急" value="3"></el-option>
            <el-option label="重要" value="2"></el-option>
            <el-option label="一般" value="1"></el-option>
          </el-select>
  </el-input>

//下拉框change事件
    selectChange() {
	this.$refs.input.focus()
    },

然后问题并没有解决,焦点仍旧是在el-select元素上
最终解决是

   selectChange() {
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
      console.log(this.$refs.input)
    },

总结:change事件改变了数据,然后vue是数据驱动渲染dom,而且是异步的,如果想让dom随着数据的变化而改变,那就需要使用vue.$nextTick()去立即获取更新后的dom

Logo

前往低代码交流专区

更多推荐