解决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>
相关推荐
长风清留扬13 分钟前
小程序毕业设计-音乐播放器+源码(可播放)下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
m0_7482478027 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
joan_852 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特2 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
一个处女座的程序猿O(∩_∩)O4 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.10 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js