vue表格双击切换输入框获取不到焦点

最新推荐文章于 2024-07-20 16:46:53 发布

梦禄

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量354

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_71311086/article/details/136203029

版权

文章讲述了在Vue3项目中，如何通过v-if/v-show切换元素并解决ElementPlus输入框在双击事件中无法获取焦点的问题，最终采用原生input标签结合CSS隐藏显示来实现输入框的焦点切换。

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

在vue3的项目中需要双击某个单元格去实现切换输入框失去焦点保存，使用element-plus的方法切换后发现输入框获取不到焦点输入框用的是element的输入框。

即使用上focus方法还是无法获取到焦点
在这里插入图片描述
切换的是通过v-if状态判断进行切换。考虑到可能是v-if的问题切换成v-show后测试时第一条数据获取不到焦点第二条可以。

最后通过原生的input标签使用css的display显示隐藏实现

表格双击事件：

const cellClick=(row, column, cell, event)=>{
  if(column.label=='检验频率'){
    detailListId.value=row.id
    document.querySelector(`.rate${row.id}`).style.display="block"
    document.querySelector(`.rate${row.id}`).focus()
  }
}

<input :class="'rate'+ row.id" @blur="tableRateBlur(row)" v-model.number="row.rate"
                     type="tel" min="1" @input="row.rate = String(row.rate).replace(/[^\d]/g,'')"
                     style="display: none;width: 100%; height: 25px;"/>
              <p v-show="row.id!=detailListId">{{row.rate}}</p>

const detailListId=ref(-1)
const tableRateBlur=async (row)=>{
  detailListId.value=-1
  document.querySelector(`.rate${row.id}`).style.display="none"
  const res=await updateNumberOfLaps({id:row.id,rate:Number(row.rate)})
  message(res)
  arrID.value=[]
  await getproducePage()
}