在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ iview table組件里面render渲染的按鈕,怎么解決事件冒泡?

iview table組件里面render渲染的按鈕,怎么解決事件冒泡?

圖片描述

我想知道在render里面寫的方法怎么阻止事件冒泡和捕獲呢?vue的官網(wǎng)只找到了上面的模板寫法。

<template>
    <Table highlight-row :columns="tabletitle" :data="tablecontent" 
        @on-current-change="currentchangefn" @on-select="onselectfn" 
        @on-select-all="onselectallfn" @on-selection-change="onselectionchangefn" border>
    </Table>
</template>

<script>
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.viewfn(params);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        },
        {
          title: "啟用/鎖定",
          key: "operate",
          width: 150,
          align: "center",
          render: (h, params) => {
            let self = this;
            return h("div", [
              h("iSwitch", {
                props: {
                  size: "large"
                },
                on: {
                  "on-change": () => {
                    console.log("啟用", self, this);
                  }
                }
              })
            ]);
          }
        }
</script>

table組件的那些方法點(diǎn)擊的時(shí)候觸發(fā)一些函數(shù),然后我自己在data里寫了個(gè)render iSwitch

如下圖圖片描述

比方說,我點(diǎn)擊當(dāng)前這一行(隨意一行),觸發(fā)table的'@on-current-change="currentchangefn" @on-select="onselectfn" @on-select-all="onselectallfn" @on-selection-change="onselectionchangefn"' 這些方法,在控制臺console一個(gè)1。然后我點(diǎn)擊“啟用/鎖定”的時(shí)候console一個(gè)2,但是還是會觸發(fā)這些方法,再console一個(gè)1。我感覺應(yīng)該是 事件冒泡,但是在render函數(shù)里怎么阻止事件冒泡沒有頭緒。有知道的大神給解答一下吧

回答
編輯回答
影魅

提完問題就在 vue 的官方文檔上找到了render的解釋 事件 & 按鍵修飾符.
render函數(shù)中 自帶event事件,不用傳參。不用寫e,直接event.stopPropagetion()就可以了。

2018年1月31日 09:03
編輯回答
萌面人
on: {
  "on-change": (e) => {
    console.log(e) // 看看這是什么
    console.log("啟用", self, this);
  }
2017年9月22日 13:09
編輯回答
神經(jīng)質(zhì)
on: {
click: e => {
  e.stopPropagation();
  this.removeRow(params);
}}
用原生JS阻止冒泡就可以了
2018年1月4日 11:54