给el-table-column添加指定列的点击事件

如果工作中遇到了表格，我们经常会用el-table组件来写表格，这样写出来的表格样式更好看。如果表格有某一列具有其对应的详情页，点击这一列的单项，跳转到其对应的详情页，该怎么做？那我们是不是先配一下详情页的路由呀，一般在跳转的时候，都会传个某某id，作为唯一标识，就知道传的是哪个了。然后详情页的url就是http://xxxxxx?id=1类似的。
那么还有另一种方法，获取这一行所有数据。这就要用到我们的作用域插槽了 slot-scope。

首先自定义一组数据：
然后在template的div中写以下代码：

点击人物的名字获取相应的详情对象，再弹窗出来。所以用到slot-scope，然后我们可以读出scope.row，其中就能获得一个对象，然后包括这行这个人所有的详细信息（包括姓名，年龄和住址），然后可以在methods里边配置图中的alertMessage方法。

打开页面的效果图和点击名字的弹窗：



这样如果是要跳转到对应的详情页，就得点击后，获取scope.row的id属性，然后通过this.$router.push({path:‘…’,query:{id:‘…’}})，即可跳转到相应的详情页。