elementUI勾选框绑定点击事件连续执行两次处理

最新推荐文章于 2023-06-05 19:31:58 发布
最新推荐文章于 2023-06-05 19:31:58 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52685664/article/details/118725977
版权

事件冒泡 阻止默认事件 前端开发 Vue.js 点击事件
关键词由CSDN通过智能技术生成

 事件冒泡机制导致，使用.prevent阻止默认事件，可以解决这个问题。

<div @click.stop.prevent="checkboxOnclick(id)">
  <el-checkbox v-model="checked"/>
</div>
@click.stop.prevent

吃痴鱼
关注
专栏目录
vue+elementui 实现多选框两个选项同时勾选
qq_41649755的博客
06-09 4803
问题描述： 最近项目遇到一个小功能实现，即在el-checkbox-group中，点击某一个选框时，有一个选框会同时被选中，并且这个被选中的选框被设置为禁用状态。 实现思路： 在js里面，判断多选框是否选中，得到多选框选中的值，都是通过id来获取对应的多选框的状态、值。但是通过elementUI的多选框官网里面可以知道，el-checkbox没有id这个参数。多选框组设置绑定v-model，绑定选中的存到数组里面，所以这个小需求就是要对这个绑定的数组进行处理。 tips:以下只是我自己的解决方式，也许有其他
element tree ui 全选_elementui的tree组件如何实现数据的双向绑定？
weixin_39833763的博客
02-23 1269
目前碰到一个非常棘手的问题,当前项目采用的是vue+elemenuUI,有这样一个业务场景:页面中有三个视图:1,一个tree组件(采用的elementui的tree)[{Id,Name,status,TypeChildren:[{Id,Name,GIS, // 地图坐标 [lng,lat]status, // 三种状态(未选,半选,全选)Type,}]}]2,一个百度地图[{Id,Name...
checkbox点击事件修改样式
01-08
由于需要个性化checkbox的点击事件，不得以研究了一下点击事件。奈何这个项目组居然没有checkbox的样式，看着这原生的样式丑到爆，不得以研究了一下checkbox。（radio也是同理，区别是最好通过条件控制只能单选。） 这里先附上样式灵感来源地址 如果有需要变更图标的，可以在上述地址选取。 效果图： tip:需要用到jquery,注意导入。 checkbox.js $(function() { //activeCheckBox(); activeCheckBoxBySelector(, addSpan
编写一个全局组件，继承element table，二次封装element table，实现row-click点击某一行能选中
字节叔叔
08-29 444
项目中需要编写一个全局组件，继承element table，二次封装element table，实现row-click点击某一行能选中。这样每个页面只需调用这个组件就行，不需要每个页面都写一个方法来处理row-click点击某一行能选中。...
elementui复选框组使用与遇到的问题
weixin_44849078的博客
04-19 3847
elementui复选框组使用与遇到的问题1、复选框组使用2、默认值的设置3、遇到的问题3.1、导致问题的写法3.2、正常可以使用的写法 今天有个弹出窗编辑的时候elementui的复选框出了问题，控制台也没有报错，但就是死活选不中，解决后决定写一遍文章描述一下复选框的用法，以及这个问题是怎么导致的。 1、复选框组使用 // deviceDialogFormData.config默认为['0'] ...
Element Dialog 按钮无效 首次有效 第一次使用后无法再次触发mounted
qq_21113235的博客
02-22 3159
问题简述： 一个复用的弹窗如下，仅首次使用有效，之后打开使用时，底部的按钮怎么点击都没有反应了 结题思路： 样式上的问题 值的问题：弹窗显示的控制值不对，表单数据没重置 按钮事件触发问题 第一步：样式上 确认按钮所在的元素，没有遮挡层级等干扰，有就提升层级 例如：z-index：10000 第二步：值的问题 检查控制弹窗的布尔值，是否正确 检查弹窗中的处理值是否正确，是否有效重置等问题 :destroy-on-close="ture" 关...
el-checkbox-button 出现点击任意一个导致全选
yusdddd_的博客
04-21 1395
el-checkbox-button 出现点击任意一个导致全选 上一次出现情况好像是因为el-checkbox-button里面的v-for导致的，这一次是因为v-model，v-model的值应该是一个数组，不是一个string。应该把v-model里面的值，定义为数组之后再进行绑定。 <el-checkbox-group v-model="show_moreChsObject[index1].stu_ans" class="duoChs_ans">
vue element-ui el-table点击行 选中复选框 上一个被点击得复选框取消选中
fdksfskldfdslkfs的博客
03-15 2077
2.拿到复选框选中状态的长度并且上一个选中的id和当前选中的id不相等来判断(两个id不相等代表第二次点击选中不同的复选框)toggleRowSelection多选表格参数1是选中的值参数2为true则不可以取消选中。满足条件则清除上一个复选框在重新给当前点击的行一个选中状态。1.首先给table绑定ref和row-click事件。clearSelection清空用户的选择。...
表格勾选内容回显的实现（vue+elementui关于表格勾线切换页码记忆上次勾选对象并渲染）
烈火
06-29 1019
标题为了能让参考者更容易看懂，我将完整代码片段展示到如下 <template> <div class="content"> <el-dialog title="选择商品" :visible.sync="visible" :close-on-click-modal="false" width="80%" @close="$emit('update:showPro', false)"> <div class="tab-top">
element UI表格绑定动态数据与selection复选操作
weixin_45626442的博客
05-09 3332
element UI表格绑定动态数据与selection复选操作的坑 案例介绍：此案例是要求完成对客户的批量删除功能，因为客户有多条数据所以要结合分页组件来实现，并且批量删除按钮默认是禁用的，当有数据被选中时变为可用状态。 当的数据:data是一个动态数据时（分页功能导致），若表格具备selection列，且对当前操作的事件（例如selection-change）也具备对变量的操作时：表格的复选功能会执行两次。 示例代码： <el-row> <el-col :span="
关于element el-checkbox组件click事件的一些想法
lsf1192354203的博客
02-15 5017
el-checkbox事件及处理函数
【Element】在table中使用el-checkbox单击事件会触发两次
小丶kiss的博客
05-23 3228
问题描述 在element的table中 使用checkbox 的单击事件,会导致checkbox的单击事件触发两次 <div class="companyList"> <el-table ref="multipleTable" :data="companyList" tooltip-effect="dark" @cell-click="edit" >
【使用elementui中的checkBox复选框组件时，绑定click事件会触发两次（已解决）】
qq_30312887的博客
06-05 2635
使用elementui中的checkBox复选框组件时，绑定click事件会触发两次。点击取消会再弹出一次。
vue的事件绑定与表单绑定
weixin_46383743的博客
07-08 430
vue的事件绑定与表单绑定。
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
热门推荐
草巾冒小子的博客
03-02 3万+
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
VUE-Element组件（九） CheckBox多选框
w_t_y_y的博客
08-13 1万+
一、举例：现有通讯录，点击出现通讯录选择弹框。弹框右侧为选择的用户列表，可以点击删除，左侧默认为角色列表，可以勾选角色，也可以点击角色进入角色详情页勾选具体的用户。还可以在左侧上方搜索用户名或者账号出来用户列表来勾选。其中，角色列表复选框、搜索用户列表复选框、选中的用户列表复选框，三者的选中状态需要关联（不勾选、半选、全选）。 代码实现： 1、父组件： <div class="user-div" @click="openSelectUserDialog"> &...
Element 多选框change触发多次解决方法
Mr-k的博客
06-07 4498
guangwa
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 6846
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
el-checkbox-group 动态绑定选择项
QQ2856639881的专栏
04-02 1026
关键点： data中 values: [] 如果 values:null 则报错。
elementUI表格勾选框如何隐藏部分勾选框
最新发布
09-10
Element UI是一个基于Vue 2.0的桌面端组件库，它提供了一套完整的组件来帮助开发者快速搭建优雅的页面。在Element UI的表格组件中，如果你想要隐藏某些行的勾选框，可以通过自定义列模板的方式来实现。 这里有一个简单的例子来说明如何隐藏部分勾选框： ```vue <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <!-- 自定义列模板，用于显示勾选框 --> <el-table-column label="操作"> <template slot-scope="scope"> <!-- 判断当前行是否需要显示勾选框 --> <el-checkbox v-if="showCheck(scope.$index)" v-model="scope.row.checked"></el-checkbox> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '张小刚', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '李小红', address: '上海市普陀区金沙江路 1519 弄' }] } }, methods: { // 根据条件判断是否显示勾选框 showCheck(index) { // 这里可以根据实际需求返回true或false // 例如，我们可以决定每隔一行显示一个勾选框 return index % 2 === 0; } } } </script> ``` 在上面的代码中，我们通过`<el-table-column>`的自定义模板`slot-scope="scope"`来控制勾选框的显示。`showCheck`方法用于决定是否显示某一行的勾选框。这里以简单的方式举例，实际应用中你可以根据实际的数据条件来决定是否显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值