关于element 多选框组件不支持tab键输入数据的问题

最新推荐文章于 2024-03-21 11:06:29 发布

Byebye_W0rld

最新推荐文章于 2024-03-21 11:06:29 发布

阅读量403

点赞数 1

本文链接：https://blog.csdn.net/Byebye_W0rld/article/details/125729375

版权

本文介绍了如何在Vue.js应用中监听Tab键并处理Select组件的输入，确保用户在Select输入框中编辑后按Tab键能正确保存数据。通过设置临时变量存储Select值，监听Tab事件并在适当时间将值push到数据模型中，解决了输入后快速切换可能导致的数据同步问题。同时，文章提及了手动触发表单验证的必要性。

摘要由CSDN通过智能技术生成

解决思路：

监听tab事件，然后把select的input输入框的值push到它绑定的值上。

1.获取dom就不说了

2.定义一个临时变量来存储select输入框的值，通过监听来存储

const tempTo = ref("");
const tabLastTime = ref();

watch(
  () => toRef.value?.query,
  (n) => {
    if (n) {
      tempTo.value = n;
    }
    tabLastTime.value = Date.now();
  }
);

tabLastTime变量是用来判断按下失去焦点和按下tab键的间隔的，因为会有一个bug，在select框里输入数据后再删除，再tab，会出现把删除之前的数据输入的问题。

3.监听tab事件

  <el-select
            ref="toRef"
            v-model="model.to"
            class="w-480px"
            multiple
            filterable
            allow-create
            remote
            :popper-append-to-body="false"
            default-first-option
            :reserve-keyword="false"
            :placeholder="t('mail.recipients')"
            @keydown.tab="tabEnter"
          >

4.在方法里调用，把select输入框的值push到输入框绑定的数据里，然后记得清空。await form。validate是因为不知道为什么他失去焦点触发的表单验证会失效，，所以我只能手动触发。

const tabEnter = async function () {
  if (Date.now() - tabLastTime.value < 50) {
    model.value.to.push(tempTo.value);
    await form.value?.validateField("to");
  }
  tempTo.value = "";
};