需求:表格内某项点击时,不触发el-table的行点击事件。
举个栗子:
toExplor(id){
//根据id return 相应的网址
}
<el-table-column label="浏览器" >
<template slot-scope="scope">
<el-link :href="toExplor('chrome')">谷歌浏览器</el-link>
<el-link :href="toExplor('IE')">IE浏览器</el-link>
</template>
</el-table-column>
第一种改法:
利用vue的.stop修饰符,在该列外面包一层div,阻止事件向上传递
<el-table-column label="浏览器" >
<template slot-scope="scope">
<div @click.stop>
<el-link :href="toExplor('chrome')">谷歌浏览器</el-link>
<el-link :href="toExplor('IE')">IE浏览器</el-link>
</div>
</template>
</el-table-column>
第二种改法:
同样利用.stop,但是是将href链接改成点击事件
<el-table-column label="浏览器" >
<template slot-scope="scope">
<el-link @click.stop="handleClick('chrome')">谷歌浏览器</el-link>
<el-link @click.stop="handleClick('IE')">IE浏览器</el-link>
</template>
</el-table-column>
handleClick(id) {
window.open(toExplor(id), 'self')
}