我们写表格的时候,用到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代码
啦啦啦,最终效果就是这样的辣