美文网首页
Vue + element-ui el-table阻止行选事件

Vue + element-ui el-table阻止行选事件

作者: leslie1943 | 来源:发表于2019-05-16 22:34 被阅读0次

我们经常会在某个table末尾加上操作列来放置button来处理跳转和其他的逻辑
那么当点击button的时候同样也会执行在el-table 设置的 @row-click="handleRowClick"事件。如果避免这种情况呢?
其实很简单,在操作列的加上@click.stop就可以了

<el-table @row-click="handleRowClick :data="dataList">
       <el-table-column header-align="left" align="left" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.stop
                @click="handleView(scope.row)"
              >查看</el-button>

              <el-button
                v-else
                size="mini"
                @click.stop
                @click="handleProcess(scope.row)"
              >处理</el-button>
            </template>
        </el-table-column>
<el-table>

这样就可以避免执行handleRowClick事件了

相关文章

  • Vue + element-ui el-table阻止行选事件

    我们经常会在某个table末尾加上操作列来放置button来处理跳转和其他的逻辑那么当点击button的时候同样也...

  • 每周总结 20210725 vue/element-ui/jqu

    每周总结 20210725 element-ui el-table获得行id方法 vue v-model与:dat...

  • element-ui el-tab

    vxe-table vue实现表格单元格的拆分、合并 el-table的那些特殊用法 element-ui表格列e...

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • vue混入(mixins)的应用

    vue的API中有个混入,这里主要介绍利用选项合并来二次封装element-ui的el-table标签,使其达到能...

  • 【Vue】基于$attrs和$listeners封装高级组件

    之前在做vue组件扩展的时候,遇到过一些xx的事情,比如基于element-ui的el-table进行组件扩展,支...

  • el-table二次封装

    在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用,提高开发效率,减少重复代码...

  • vue30道面试题

    vue的修饰符 1.事件修饰符 prevent 阻止默认事件(在指定的事件后进行默认事件的阻止) stop阻止事件...

  • Vue知识点笔记2

    Vue指令之事件修饰符:.stop 阻止冒泡(写在子元素中阻止其触发父元素事件).prevent 阻止默认事件.c...

  • vue学习(10)事件修饰符

    知识点: vue事件修饰符:1.prevent:阻止默认事件。(常用)2.stop:阻止冒泡事件。(常用)3.on...

网友评论

      本文标题:Vue + element-ui el-table阻止行选事件

      本文链接:https://www.haomeiwen.com/subject/dmfgaqtx.html