elementui 中的表格首列复选框的点击事件

先上一张项目中的图片:

 

 需求:

  1、点击表格数据,会弹出一个问题详细数据的面板表单数据,说明行点击有一个事件。

  2、点击首列复选框有一个 this.$message( ) 的提示操作弹框。

解析:

  点击复选框首先不能事件冒泡,触发表格的行点击事件。一开始给复选框绑定的是 change 事件,达不到要求。后来绑定 click 事件,为了不事件冒泡,添加了 .stop ,后来触发不了事件,上网搜解决方案,有网友建议加 .native ,即 

@click.stop.native="handleSelectionChange(scope.$index, scope.row)" ,发现事件触发两次,因为是点击复选框要弹一个操作面板,事件触发两次就表示会弹两次面板,不符合需求,后来搜了很多文章,无意间看到有网友提出要加 .prevent ,因为框架是封装的,渲染的时候,会触发 label 的事件,貌似是这样,也不是很了解。就加了 .prevent ,即 
@click.native.prevent.stop="handleSelectionChange(scope.$index, scope.row)"后来发现事件虽然触发了,但是复选框不选中,因为事件被阻止了。
  一开始卡在这里了很久,后来想明白了,点击复选框后的效果是首先弹一个操作框,同时又不触发表格的行点击事件。目前来看这两个要求都达到了。至于复选框选中不选中,可以根据表格数据加载的时候,处理一下ajax获取到的表格数据,往数据里面添加 checked 属性,来控制复选框是否被选中。
  所以,点击复选框,弹一个操作框,如下图:
  

  点击确定按钮之后,然后重新获取表格数据,表格数据被改变,表格重新加载,可以达到复选框选中或者不选中的效果。

  至此,问题完美解决。

后语:

  文章啰嗦了点,如果你有碰到同样的项目需求,或者碰到同样的问题,希望这篇文章对踩坑的你有所帮助。

 

  

原文地址:https://www.cnblogs.com/smile-fanyin/p/12494836.html