element-UI中table表格的@row-click事件和@selection-change耦合了

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="openDetails" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="38"></el-table-column>
    <el-table-column label="订单编号" width="170" fixed>
      <template scope="scope">{{ scope.row.orderNo }}</template>
    </el-table-column>
    <el-table-column prop="payNo" label="支付单号" width="170"></el-table-column>
    <el-table-column prop="wName" label="商户公众号名称" width="130"></el-table-column>
    <el-table-column prop="wID" label="商户公众号ID" width="120"></el-table-column>
    <el-table-column prop="payer" label="支付人" width="120"></el-table-column>
    <el-table-column prop="payment" label="支付方式" width="100"></el-table-column>
    <el-table-column prop="business" label="所属业务" width="100" show-overflow-tooltip></el-table-column>
    <el-table-column prop="amount" label="支付金额" width="120" class-name="sum-color"></el-table-column>
    <el-table-column prop="fee" label="手续费" width="120" class-name="sum-color"></el-table-column>
    <el-table-column prop="refund" label="退款金额" width="120" class-name="sum-color"></el-table-column>
    <el-table-column prop="actual" label="实际金额" width="120" class-name="sum-color"></el-table-column>
    <el-table-column prop="status" label="到帐状态" width="100"></el-table-column>
    <el-table-column prop="payDate" label="支付时间" width="150"></el-table-column>
    <el-table-column prop="arrivalDate" label="到帐时间" width="150"></el-table-column>
</el-table>

注意@row-click和@selection-change

export default { data () { return { tableData: [ { id: 123, orderNo: '6881234567890123456', payNo: '2331234567890123456', wName: 'xxx公众号', wID: 'zjfiawsf', payer: '张三张四张五', payment: '微信支付', business: '微餐饮', amount: '14614.00', // 支付金额 fee: '322.00', // 手续费 refund: '322.00', // 退款金额 actual: '322.00', // 实际金额 status: '已到帐', // 到帐状态 payDate: '2017-9-27 10:31:37', // 支付时间 arrivalDate: '2017-9-27 10:31:44', // 到帐日期 } ], multipleSelection: [], } }, watch: { multipleSelection: function () { let arr = []; for (let i in this.multipleSelection) { arr.push(this.multipleSelection[i].id); } console.log('勾中的id为：' + arr.join()); } }, methods: { //打开详情页弹窗 openDetails(row) { alert(row.id); }, // 获取多选参数 handleSelectionChange(val) { this.multipleSelection = val; }, } }

checkbox勾选的时候，alert会被触发两次。我猜想是@row-click和@selection-change耦合了，可是element-UI的文档很简洁，不知道@row-click和@selection-change怎么解耦。
正常效果应该是点击一行数据alert出数据的id,点击checkbox把id存起来。

解决方法：

openDetails(row,event,column) { if(event.target.nodeName!="INPUT"){ alert(row.id); } }