element 复/选框点击一个选框，但是全部选中的bug

最新推荐文章于 2024-04-18 11:18:55 发布
最新推荐文章于 2024-04-18 11:18:55 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： vue 文章标签： element  vue 复选框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43047070/article/details/99728973
版权

出现同时选中的问题：在这里插入图片描述

在这里插入图片描述
单选框：
原因1：如红色框所示，没有绑定v-model。
原因2：如绿色框所示：没有绑定label。
在这里插入图片描述
复选框：
原因1：如红色框所示，没有绑定v-model ， 并且复选框的绑定对象为数组。checkbox:[]
原因2：如绿色框所示：没有绑定label。

在这里插入图片描述

迷阵
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element Checkbox 多选框点击一个导致全选
qq_43517774的博客
11-05 3390
问题复现： 点击一个框的时候，所有框都被选中 调取后端接口，值未被读取 想要实现的样子： 代码： vue的template部分 <el-form-item label="录像类型" prop="videoType"> <el-checkbox-group v-model="ruleForm.videoType" prop="videoType"> <el-checkbox label="1" name="videoType"
学习记录：ElementUI多选框模板，选中一个其他的也被选中
weixin_47130317的博客
09-05 980
输出checkgroupIds数组，发现只有一个值，都为0，是什么原因呢……，id从后台获取的都是0，原来是数据库语句获取时没有id字段（本人无语）
element-plus关于el-radio-group选择一个单选按钮，全被选中
最新发布
就是你的博客
04-18 1606
官方实例中使用的value来绑定radio的值，这个在2.60版本可以使用，在此一下版本使用的是label来绑定值。使用el-radio-group 组件，进行多个互斥选择时，点击一个选项时，全部选择。设置radio的默认值也无法选中。我的"element-plus": "2.3.7",只能使用label来绑定。使用label来绑定radio的值。
【记录ElementUI中Checkbox多选框组件选择一个却显示全部选中问题】
weixin_45249740的博客
09-22 1216
ElementUI中Checkbox多选框组件vmodel值不能为null，否则选中任意一项，都显示全部选项被选中，其vmodel值都为true。
el-select 选中其中一项所有项都被选中的bug 使用整个对象作为value值
小猫爪子
08-03 3709
选择整个item对象作为value值，此时必须设置value-key. <el-select :disabled="item.disabled" v-model="dataForm[item.model]" :placeholder="'请选择'+ item.label" v-if="item.type === 'selectItem'" @change="changeHandle($event,item.model)"> <el-option ...
vue+element el-checkbox 选中一个全部都被选中
weixin_49847526的博客
12-21 2087
例如：点击一个即所有的多选框都选中了，出现的情况有以下几种； 第一种情况：v-model 绑定的值应该是数组的形式，结果写成了字符串的形式。 第二种情况：没有写label值
vue遍历的多选框的小问题，点击一个导致全选
furfur-jiang的博客
07-14 2838
必须指定不同的value，否则会导致全选，而且value值需要不相同，由于此处的value值为变量，所以前面需要加：，否则仍然导致value相同的全选结果 <ul> <li v-for="(data,index) of datalist" :key="datalist.id"> <input type="checkbox" v-model="checkGroup" :value="data.name"/>{{data}} </li> </ul&gt
element带选择表格将表头的复选框改成文字的实现代码
12-28
方法一：使用表格属性：header-cell-class-name 表格界面代码 data=tableData header-cell-class-name=cellclass xss=removed> </el> 日期 width=120> <templ
element ui table（表格）实现点击一行展开功能
10-17
主要给大家介绍了关于element ui table（表格）实现点击一行展开功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
/element-ui/lib/index.js
08-21
element-ui组件的离线使用资源，将其放在项目下引用正确路径即可使用，使用时需同时引入vue.js（https://download.csdn.net/download/weixin_45660840/12737581），适用于非前端项目页面使用
Element ui 下拉多选时新增一个选择所有的选项
12-09
项目里经常会用到，在一个多选下拉框里新增一个选择所有的选项，例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed]...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在开发Web应用时，Element-UI是一个非常流行的前端组件库，它提供了丰富的UI元素和功能。在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。...
element ui table单选框点击全选问题
weixin_30642267的博客
12-25 1178
<template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState" size="small"> 　　<el-radio :label="0" @change="operation(scope.row, RepairOrChangeListTwo[0].valu...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
前端岚枫
07-30 2950
这半个月都在折腾vue的项目，虽然不是很复杂，但对于刚入门的小白来说，踩到的坑不少，常常因为一个小问题就得浪费好久问题，不过娃不在身边，晚上和周末可以继续研究，趁睡觉前，把今天遇到的问题给总结一下，做个记录，也希望可以为同行的童鞋提供点小小的解决思路。 dropdown组件的下拉菜单子选项click事件触发没反应问题，代码如下 给@click加上native 如@click.native ...
element checkbox多选框选择自定义，选择全部选中bug解决办法
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
07-05 4106
先写好自己的数据格式，循环到ele标签内 <el-checkbox-group v-model="punish"> <el-checkbox :key="city.id" :label="city.id" v-for="city in cities"> {{city.name}} </el-checkbox> </...
el-checkbox-button 出现点击任意一个导致全选
yusdddd_的博客
04-21 1325
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">
element ui el-table组件多选情况下,选中任意一行，全选框也被打√
weixin_45591598的博客
08-04 769
遇到一个问题，如下图：发现有啥不对劲儿的地方吗？没错就是选中一行，全选框也打了个√。
Element遇到的坑：el-tree 默认选择几个节点，却全选中了
weixin_38091374的博客
05-07 7748
测试丢了个bug给我，他在一个树的节点造了一千多个子节点，结果本应该选中几个子节点的，却全选中了子节点。 下面的单位存在一千多个节点，选择了前面的4个子节点，提交后，再次打开。需要默认勾选中的4个节点，通过 default-checked-keys属性设置选中其中的节点，却全选了 我的代码是 使用懒加载lazy的方式加载二级节点 解决方式loadNodeRange函数 ...
element-ui 在el-dialog中使用el-checkbox的一些坑
weixin_58195884的博客
05-08 206
this.keyTable = Math.random() // Math.random()是获取一个随机小数来代替key值。js中只需要改变keyTable的值就行了，每次点击更新一次keyTable。label="只读"
element ui tables中复选框反选
09-08
在 Element UI 的表格中，如果要实现复选框的反选，可以使用以下步骤： 1. 首先，在你的表格中添加一个列来显示复选框。可以使用 `<el-table-column>` 组件，并设置 `type` 属性为 "selection"。示例代码如下： ```html <el-table :data="tableData"> <el-table-column type="selection"></el-table-column> <!-- 其他列 --> </el-table> ``` 2. 接下来，在你的组件里定义一个变量来存储选中的行数据。例如，可以定义一个 `selectedRows` 数组。示例代码如下： ```javascript data() { return { tableData: [], // 表格数据 selectedRows: [], // 选中的行数据 // 其他数据 }; }, ``` 3. 在表格的复选框列中，绑定一个 `selection-change` 事件，并在事件处理函数中更新选中的行数据。示例代码如下： ```html <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <!-- 其他列 --> </el-table> ``` ```javascript methods: { handleSelectionChange(selection) { this.selectedRows = selection; }, // 其他方法 }, ``` 4. 最后，在你的页面上添加一个按钮或其他触发反选的元素，并绑定一个点击事件处理函数。在事件处理函数中，可以通过判断当前选中的行数据和表格数据的差集，来实现反选。示例代码如下： ```html <el-button @click="reverseSelection">反选</el-button> ``` ```javascript methods: { reverseSelection() { const allRows = this.tableData; const selectedRows = this.selectedRows; const unselectedRows = allRows.filter(row => !selectedRows.includes(row)); this.selectedRows = unselectedRows; }, // 其他方法 }, ``` 这样，当点击 "反选" 按钮时，选中的行将会变为未选中，未选中的行将会变为选中。记得在样式部分进行适当的样式调整，以使用户可以清楚地看到当前的选择状态。希望对你有所帮助！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值