el-checkbox复选框，单次点击选中框，取消失败

原创 于 2023-07-05 11:42:34 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #el-checkbox #vue.js

文章描述了一个项目中关于页面初次渲染时复选框回显的问题。问题在于回显的数据包含重复值，导致单次点击无法正确取消选中状态，需要多次点击才能生效。解决方法是通过对回显数据执行去重操作，从而确保单次点击能准确地取消或选中复选框。

项目场景：

页面初次渲染，回显复选框，并且可取消/选中。

问题描述

单次点击回显选中的复选框，取消选中失败，多次点击后取消选中状态成功。

原因分析：

回显数据值存在重复，导致单次点击无法取消。

解决方案：

对回显数据进行去重操作。

ElementUI - checkbox 复选框背景透明或其他颜色（样式覆盖）
🏆 前端领域优质创作者
05-08 4170
前言 ElementUI 默认为白色背景。 有时候，我们需要一个透明背景的 checkbox 复选框（与背景衔接），如下图所示： 解决方案 注意 <style> 标签添加 lang=“scss”，否则无效。 采用覆盖样式方法，想自定义其他样式都在 .el-checkbox__inner 类中。 .el-checkbox__inner{ background: rgba( #000000, 0)!important;/* 透明 */ /* background:red
解决vueCascader级联选择器复选框只能点方框选中问题
萌萌的博客
08-18 1272
级联选择器选中范围扩大
el-collapse勾选框初始赋值checked为true后取消不掉
weixin_44728725的博客
10-10 961
一开始以为是折叠面板刷新问题，勾选框消除不掉，只有折叠之后再打开，勾选框才会消除掉。从列表【编辑】按钮进入能获取到选择的数据集与选择的算法等信息。后来发现是初始化问题。
el-checkbox-group 点击box 没反应，无法取消勾选（记一次debug的思路）
Curry_On的博客
06-06 6435
今天工作时，碰到了项目代码中一个bug，表现出来的效果是：el-checkbox-group 点击 box 没反应，无法取消勾选。 也就是 box 默认是被勾选上的，但是点击取消勾选却没反应。 问题看起来还是比较奇怪，当然，最后bug还是被找出来了，这篇文章就来记录和分享一下我找问题的思路...
vue与element ui的el-checkbox的坑el-checkbox不能选中或者选中不能取消
热门推荐
jerryyang_2017的博客
06-17 2万+
一，场景 通过使用checkbox，实现如图的场景， 点击某个tag，实现选中和非选中状态。 二， 官网的例子 通过切换checked值为true或者false来实现，一个checkbox的状态切换 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <scr
elementUI中 el-checkbox-group设置了max，全选之后无法单独取消某个选中数据
Moria
02-24 1556
elementUI 的 el-checkbox-group组件设置了max全选之后就无法手动取消单个选中的数据，必须点取消全选按钮才可以全部取消选中，巨🕳 <template> <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选/取消全选</el-checkbox> <div style="margin: 15px 0;"></div> // 设置了max
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 7370
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
el-checkbox-button 去掉选中框
10-18
如果你想要完全移除复选框效果，可以尝试将整个 `.el-checkbox__input` 区域的样式都隐藏： ```html .el-checkbox { visibility: hidden; /* 或者 opacity: 0; 如果需要元素还在页面上只是不可见 */ } ``` 这样...
el-checkbox-group 去掉选中框
10-18
`el-checkbox-group` 是 Element UI 中的一个组件，用于处理多个单选或多选复选框的选择。如果你想去掉选中框的外观，即隐藏已选择选项的勾选框，可以采用以下方法： 1. **样式覆盖**：直接通过 CSS 选择器修改 `el...
记一次el-tree懒加载树的CheckBox优化
sfyjknvcx的博客
02-24 787
大家好，我是南宫。今天检查代码的时候，遇到了个问题：我随手点了个提交，结果返回给我一个500，还以为是接口又出了问题，仔细一看控制台，是我提交的数据不符合业务需求。那么问题来了，我为什么能够提交这样的数据过去？这样的请求能不能被避免？
element UI中el-checkbox(复选框)选中状态影响底部确认按钮状态 返回取消选择所有复选框
卷发头的鲁智深的博客
03-06 4355
vue项目中，element UI复选框影响底部确认、批量删除等按钮，el-checkbox
element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态
drift_away_的博客
08-12 1万+
一. 实现表格多选框 1.首先要想在表格中实现多选：需要手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 <el-table ref="multipleTable" :data="tableData3" tooltip-effect="da
Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应
ZJ15981837003的博客
04-22 2079
先把后端返回的值获取 如果是字符串需要转换为数组 使用$set方法：用此方法更新视图达到操作同步的效果 this.param 为对象 suit_room_type 为要赋值的对象的属性 row.bind_room_codes ? row.bind_room_codes.split(‘,’) : [] ：为要赋的值 this.$set(this.param, 'suit_room_type', row.bind_room_codes ? row.bind_room_codes.split(',') : [])
下拉框单选无法取消解决办法
wq_wangqiang的博客
07-17 920
onSelect = function(r){ var me = "#action1"; var id = $(me).combobox('getValue'); if(r.id==id){ }else{ $(me).combobox('unselect',id); $(me).combobox('select',r.id); } ...
element el-select下拉框选择失效
敲代码无敌小奶龙的博客
01-11 7186
element el-select下拉框选择失效
解决element-ui的下拉框有值却无法选中的情况
yf18040578780的博客
09-27 646
解决element-ui的下拉框有值却无法选中的情况
element ui 使用checkbox（多选框）遇到的问题总结
xiaomanonyo的博客
01-21 5982
功能就是这样 多选 遇到的问题有两个： 第一个是编辑的时候获取数据，checkbox没有被选中； 第二个是 编辑的时候，取消选择之后，数据还是提交给后端了（这个问题和第一个问题是相关联的） 第一个问题，返回了数据，checkbox没有被选中（这个问题怪我自己没有仔细看文档） 当后端返回数据之后，要通过设置checked属性，来手动设置复选框的选中状态，像下面这样 第二个问题取消选择之后，数据还是提交给后端了 因为第一个问题，设置了checked的状态之后，如果是t...
element ui el-checkbox 选择异常
tu1425407707的博客
06-20 1544
记录使用element-ui 遇到的问题
复选框checkbox如何一直选中，不能去掉勾选
qq_39080240的博客
01-06 3373
多个复选框，有一项是要求一直都要被选中的，不能去掉勾选，如果用了
el-checkbox复选框 回显 双向绑定
最新发布
10-21
### el-checkbox复选框双向绑定 在Vue中，`el-checkbox` 可通过 `v-model` 指令实现双向绑定。`v-model` 能将复选框的选中状态与数据属性关联起来，数据属性值的变化会反映在复选框的选中状态上，反之亦然。 示例代码如下： ```vue <template> <div> <el-checkbox v-model="solicitation.codAmount" true-label="1" false-label="0">有货款</el-checkbox> <p>当前选中状态: {{ solicitation.codAmount }}</p> </div> </template> <script> export default { data() { return { solicitation: { codAmount: '0' } }; } }; </script> ``` 在上述代码中，`v-model` 绑定了 `solicitation.codAmount`，当复选框状态改变时，`solicitation.codAmount` 的值会相应改变；反之，`solicitation.codAmount` 值改变时，复选框状态也会更新。 ### el-checkbox复选框回显 回显通常指在页面加载时，根据已有数据设置复选框的选中状态。结合双向绑定，只需在数据初始化时设置好对应的值，复选框就能正确显示选中状态。 示例代码如下： ```vue <template> <div> <el-checkbox v-model="isChecked">是否选中</el-checkbox> </div> </template> <script> export default { data() { return { // 假设从后端获取到的数据 isChecked: true }; } }; </script> ``` 在上述代码中，`isChecked` 初始值为 `true`，页面加载时，复选框会自动处于选中状态。 ### 一组 el-checkbox 回显与双向绑定 对于一组 `el-checkbox`，可使用数组来实现双向绑定和回显。 示例代码如下： ```vue <template> <div> <el-checkbox-group v-model="checkedCities"> <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox> </el-checkbox-group> <p>当前选中的城市: {{ checkedCities }}</p> </div> </template> <script> export default { data() { return { cityOptions: ['北京', '上海', '广州', '深圳'], // 假设从后端获取到的已选中城市 checkedCities: ['北京', '上海'] }; } }; </script> ``` 在上述代码中，`el-checkbox-group` 通过 `v-model` 绑定 `checkedCities` 数组，页面加载时，`checkedCities` 中的城市对应的复选框会自动选中；当用户操作复选框时，`checkedCities` 数组会相应更新。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈善强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值