vue element UI 动态表格增加快捷编辑 使用popover组件完美实现

需求在表格内点击可以快捷编辑项限时弹窗进行编辑修改

首先放一张效果图

遇到问题
1.使用popover组件,自定义content(样式基本就出来)
2.点击可以弹出来,提交后无法隐藏
3.给每个可编辑项增加一个唯一ID(起名字真吐血了)

重点问题解决
在点击提交后,需要模拟点击下当前的ID(就是上面所说的吐血ID)
重点 ID = ‘popover’+index+column.id 只有这样,当前取得的id才是唯一的

下方附带已经封装好的组件
使用方法在组件的 props (注释即文档)

下载组件地址

组件使用
1.在父组件中引入组件

2.使用组件

3 属性
row: 当前行的数据(对象类型)(必填)
column:当前列的数据(对象类型)(必填)
index:当前第几行下标(数字类型)(必填)
type:要编辑的字段 (字符串类型)(必填)
origin:最终数据中是否包含原数据(布尔类型 || 字符串类型)([选填] 默认为false)
value:输入框初始化值 (布尔类型 || 字符串类型)([选填] 默认为true)

4. 方法 @fastEditSubmit (点击提交按钮的事件)
   参数
   {
   originData:原数据(origin为true,才会出现)
   editData : 编辑后的数据
   field : 编辑的字段名
   id : 该条记录的ID
   current: 当前的ID组成参数 (可忽略)
   }