vue3实现表格单元格可编辑

以往编辑表格内容都是点击编辑按钮，进入编辑页面或弹窗对整行做编辑的效果。

而这次由于项目需要实现在表格内双击就能编辑对应单元格的功能，对于没有做过的我来说也是一个新挑战 。

需要达到的效果：

方案一

由于项目使用的是element-ui，所以一开始想到的就是去 table 组件找有没有能满足此需求的属性。没想到还真有（cell-dblclick）。

下面看实现效果（部分代码）：

​

这样，就可以了！可是真的可以了吗？

仔细看一下，觉得这种写法局限性还是太多，不够灵活，放弃使用。

方案二

思路：不使用el-table的 cell-dblclick 属性，设置一个变量，监听双击事件，去控制单元格展示的内容。

（部分代码）:

{{scope.row[prop]}}

// 双击 出现输入框 constdbCell= (a: any) => { isEdit.value=true; rowInd.value=a.row.index; colInd.value=a.column.index; };

这种实现方法更简单、拓展性更高，而且符合编写习惯。

需要注意的地方是区分点击的是哪个单元格, 且下拉框不能使用blur。