Vue表格中动态显示隐藏的input输入框实现

在Vue.js开发中，遇到的一个常见需求是在表格（例如使用Element UI的el-table）中实现鼠标移入移出特定单元格时，input输入框的显示与隐藏效果。当你将鼠标移到某个单元格，该单元格中的input元素会显示出来，允许用户输入数据。当input内已经有输入值时，即使鼠标离开，input也不会隐藏，保持可见状态，直到用户完成输入。而一旦用户在其他地方移动鼠标，输入框则会自动隐藏，仅显示单元格原本的文本内容。 为了实现这个功能，首先在el-table组件中定义一个ref属性，如"table"，并绑定一个方法"editCell"，当鼠标进入单元格时，会触发这个方法。在每个需要动态展示或隐藏input的列模板（<template slot-scope="scope">）中，我们使用了v-model指令来双向绑定input的值，以及v-show指令来控制input的显示与隐藏。 对于每个单元格，我们创建了一个特定的ref，例如"名字-{{scope.row.id}}"和"标题-{{scope.row.id}}”，这样可以方便地引用对应的input元素。在v-show指令中，我们检查当前行的id是否等于tabClickId（可能是通过点击事件设置的变量），并且tabClickLabel是否等于当前列的标题。如果满足条件（即鼠标在特定列的单元格上），input将显示；否则，显示的是普通的单元格文本。 当用户在input中输入完毕并失去焦点（通过@blur事件），我们可以通过inputBlur方法进一步处理，例如清空tabClickId或tabClickLabel，使其重新回到默认状态，从而触发input的隐藏。同时，当用户完成输入后，输入值会自动同步回对应的表格单元格中，保持数据的一致性。 这种设计利用了Vue.js的数据绑定和条件渲染能力，实现了动态交互式的用户体验，尤其是在处理表格这类常见的数据展示和编辑场景中，提高了用户的操作效率和界面的易用性。