使用Element UI开发页面中遇到的问题之可编辑表格

我们写表格的时候，用到element里的表格组件，可以编辑删除哪一个，但是组件里的编辑删除点击的时候是没有效果，需要我们自己去添加方法写功能，在这里提供了两种方法，可以编辑删除表格。

第一种方法：点击表格直接编辑

第一个方法就是点击表格的时候表格就可以呈现编辑状态，没有操作按钮的，在表格内可编辑逻辑是这样的，如果我们想可编辑，那么表格里的内容就得用input和span来展示内容（因为input是可编辑的）。首先我们为这个表格添加高亮显示（highlight-current-row）当点击一行的时候，这一行就变成了高亮显示，就会自动添加"current-row"这个属性，正是利用这个属性来实现input和span之间的切换，达成表格可编辑的效果。
具体代码如下：

1.html代码：

给当前table添加高亮显示

2.js代码

3.css代码
其实主要逻辑就是由css代码来实现的

当然了，最后的结果是这样的

============================================================================================================

第二种方法就是有操作按钮的可编辑表格

主要通过点击编辑删除按钮来进行对表格操作，原理和第一个方法差不多，只不过实现方法不一样，实现效果也有点差别。当我们点编辑的时候，找到编辑所在行添加class，通过这个class来控制Input和span 的隐藏展示
1.html代码

2.js代码

数据是和第一个方法数据一样的，这里展示主要js代码

3.css代码

啦啦啦，最终效果就是这样的辣