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

使用的是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();,来阻止事件冒泡就可以解决了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。