点击表格中按钮触发自身事件以及上级事件问题

32次阅读

共计 486 个字符,预计需要花费 2 分钟才能阅读完成。

使用的是 iView 组件库的 Table 表格

在表格中操作一列有删除和修改按钮,分别给删除和修改按钮注册了点击事件,但是同时还给表格的每一行注册了点击事件(项目需要在点击每一行时显示当前的详情信息),之后就发生了在点击删除和修改按钮时,不仅触发删除和修改按钮绑定的点击事件,还触发了给每一行注册的显示详情信息的事件。

// 点击删除按钮
delectTableData(nowid) {event.stopPropagation();
       this.$Modal.confirm({
             title: "删除提示",
             content: "<p> 确定要删除吗?</p>",
             // 确定删除
             onOk :async () => {const { data: res} = await this.$http.delete("xxxx" + id);
               if (res.code !== 200) {return this.$Message.error("删除失败");
               } else {this.$Message.success("删除成功");
               }
             }
       });
 },

在删除按钮事件里面添加 event.stopPropagation();,来阻止事件冒泡就可以解决了。

正文完
 0