解决el-table中使用el-input无法聚焦问题

在el-table中点击单元格时使用el-input或其他表单组件编辑单条数据。会出现聚焦不上的问题,需要手动点击才能够聚焦。究其原因是因为点击单元格时页面已自动聚焦到单元格,此时无法自动聚焦到对应的表单,需要手动设置。

javascript 复制代码
<template>
  <el-table
    :data="tableData"
    @cell-click="cellclickHandle"
  >
	<el-table-column prop="text" label="编辑" align="right">
      <template #default="{ row }">
        <el-input
          v-focus
          style="height: 20px"
          v-model="row.text"
          @blur="cellBlur(1, row)"
          v-if="row?.isEdit ?? false"
        />
        <span v-else>{{ row.text }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { reactive } from "vue"
  
....

//自定义指令
const vFocus = {
  mounted: el => {
    //清除el-table的cell聚焦
    document.activeElement.blur()
    const targetInput = el.getElementsByTagName("input")[0]
    targetInput.focus()
  }
}

//表格点击
let cacheRow = reactive({})
const cellclickHandle = (row, column) => {
  const { property } = column
  if (!["text"].includes(property)) return
  cacheRow = JSON.parse(JSON.stringify(row))
  if (property === "text") {
    row.isEdit = true
  } 
}

const cellBlur = async (input, row) => {
  row.isEdit = false
  if (cacheRow.text == row.text) return
  await ...
  ElMessage.success("编辑成功")
}
</script>

<style lang="scss" scoped>
</style>
相关推荐
北海-cherish2 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch2 小时前
网球馆自动预约系统的反调试
javascript·网络
新中地GIS开发老师4 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang5 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。5 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。5 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡5 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_5 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含5 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友5 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端