在el-table中href跳转与row-click事件冲突时

需求：表格内某项点击时，不触发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')
}