element UI 开关阻止冒泡

clipboard.png

需求:点击表格的任意一行可以跳转某个页面,但是el-switch 怎么阻止冒泡?有大神遇到过吗?

阅读 6.7k
2 个回答

在你的el-switch 组件上加 @click.stop.native 就可以阻止冒泡啦
为了防止我误导,我本地验证了一下可行性,哈哈哈~

<template>
  <el-table :data="tableData" @row-click="rowClick">
    <el-table-column label="序号" prop="id" align="center"></el-table-column>
    <el-table-column label="发布状态" align="center">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.status" @change="handleStateChange(scope.row)" @click.stop.native>
        </el-switch>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      tableData:[{
        id:1,
        status:1
      },{
        id:2,
        status:0
      }]
    }
  },
  methods: {
    handleStateChange(row){
      console.log(row.status)
    },
    rowClick(){
      console.log('rowClick')
    }
  }
}
</script>

点击任意一行应该是cell-click吧 他有好几个参数 其中就有点击的单元格 可以加判断

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题