双击编辑el-table的单元格

1、目标效果

        源码全部写在App.vue中,复制粘贴即可!

       

         未双击单元格前

双击编辑el-table的单元格_第1张图片

        双击单元格中,并修改单元格数据

双击编辑el-table的单元格_第2张图片

        

        单元格失去焦点

双击编辑el-table的单元格_第3张图片 

2、原理解释

(1)单元格双击事件参考官方文档:

双击编辑el-table的单元格_第4张图片

 

(2)el-table刷新要求绑定el-table的key要发生变化才会刷新

(3)如何控制指定单元格的显示与隐藏?

        查看一下cell-dblclick(row, column)的row、column是什么?都是对象

双击编辑el-table的单元格_第5张图片

双击编辑el-table的单元格_第6张图片 

         我们可以往row里面添加一个属性来唯一标识某一行的数据,双击时使这特殊属性为true,输入框失去焦点时则设置特殊属性为false,并且输入框的显示与隐藏通过v-if与特殊属性绑定。

        双击编辑el-table的单元格_第7张图片

双击编辑el-table的单元格_第8张图片 

   

(4)通过$refs.focus()实现聚焦效果 

3、源码






你可能感兴趣的:(前端,前端,elementui,vue)