• 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 属性,来控制复选框是否被选中。
      所以,点击复选框,弹一个操作框,如下图:
      

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

      至此,问题完美解决。

    后语:

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

     

      

  • 相关阅读:
    乐动力APP案例
    四则运算题目自动生成
    第0次作业
    CMDB整体项目梳理(1)
    cmdb项目准备
    DjangoAgain CBV与FBV
    Django ORM不完全操作
    Django 查漏补缺记录
    DjangoAgain_用小程序理解web框架
    DjangoAgain_url路由系统
  • 原文地址:https://www.cnblogs.com/smile-fanyin/p/12494836.html
Copyright © 2020-2023  润新知