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

我们经常会在某个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事件了