vue+element怎么实现表格内编辑

Question

如图所示，我想使用element-ui实现一个这样表格中编辑的功能，还请给个思路，谢谢！

Answer 1

给你提供一个思路，你看能不能理解：1、在每个需要点击可编辑的列里面都放置一个和那个列宽高都相等，且样式都一样的input输入框2、使用v-if和v-else来控制input和span(我把绑定内容并显示想象成用span包含的)3、让input的v-model和span绑定值是同一个，再定义一个变量来控制input和span的显示隐藏切换4、当点击span的时候，span隐藏，input显示，这时显示的内容因为是和span绑定的内容一致的，所以更改会实时生效，不用事件去控制5、当input失去焦点或者用户按下enter键时，input隐藏span显示