element ui 中 el-checkbox-group 点击一个全部选中的问题

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量7k 收藏 4
点赞数
文章标签： javascript vue.js html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42042787/article/details/106928767
版权

element ui 中 el-checkbox-group 点击一个全部选中的问题

原因是：checkbox-group中的v-modle要单独一个数组对象，不能作为表单对象，ruleForm中的一个属性值，提交表单时，将数组对象处理一下，赋值给ruleForm表单对象就可以了！

出现这个问题的原因经过排查，是因为在其它的代码里把ruleForm中的v-modle的数组属性的类型转了，当时没有发现，后来排查发现了，所以checkbox-group中的v-modle是可以直接使用ruleForm中的属性，但是需要注意的是必须是数组且，不要转换了。如果实在是要转换那就可以将v-modle中的数组独立出来！

菜小黑
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若二级子菜单无一个选中，则对应的一级菜单也不是选中状态 当一级菜单发生点击事件时，若原本为选中状态，则取消选中，若该菜单下有二级子菜单，所有子菜单也取消选中状态；若原本为未选中状态，则改为选中状态，若该菜单下有二级子菜单，所有子菜单也改为选中状态。 实现已有的选择记录的复现。 实现过程 1.data数据 data() { return { menu: [] //所有的菜单数组， menusIds: [] //已选的菜单id数组 } } 2.html部分   要实现一个嵌套的效果，每一个一级菜单应该
vue+el-radio单选框遍历出来的时候会一起选中的问题
weixin_45646663的博客
05-20 3012
1，因为是遍历出来的v-model="itt.Result"就需要用遍历出来的每个对象中的布局作用域的元素，不能像官方API那种用的全局对象，label也需要是不一样的 <div v-for="(itt,ind) in ite.forthlist" :key="ind" class="ittContent"> <div v-if="itt.Type === 1"> <span>{{ind+1}} &nbsp;&nbsp;</span&gt
Element Checkbox 多选框点击一个导致全选
qq_43517774的博客
11-05 3152
问题复现： 点击一个框的时候，所有框都被选中 调取后端接口，值未被读取 想要实现的样子： 代码： vue的template部分 <el-form-item label="录像类型" prop="videoType"> <el-checkbox-group v-model="ruleForm.videoType" prop="videoType"> <el-checkbox label="1" name="videoType"
element-plus 关于 ＜el-radio-group＞单选框一选全选问题
呆萌小菜鸟的博客
03-07 3039
低于2.6.0 版本库需需要加上lable 就可以解决了。3.0.0 版本被移除，请考虑使用新 API 替换.文档中的代码运行时，点击其中一项选中时会默认全选，只用来表示展示的文字，这个被废弃的用法。在2.6.0 中已经可用，您可以使用。API 来设置复选框的值。
vue + element checkbox-group 点击一个所有全部选中了
王博的博客
05-13 4594
问题： 在业务开发中，使用了checkbox-group组件，发现点击其中的一个选项后，所有数据都被选中了。 原因：checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定**Array类型**的变量即可。 <template> <el-checkbox-group v-model="checkList"> <el-checkbox v-for="(item, index) in typeLis.
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
el-checkbox-group全选、单选实现
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
08-16 2352
页面结构： <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <el-checkbox v-for="(city,i) in cities" :label="city.path" :key="i">{{city.time}}</el-checkbox> </el-checkbox-group> <el-checkbox size="
vue element 的el-checkbox-group默认全部选中
热门推荐
小猪的博客
11-19 1万+
<!--标注选择标签弹层组件--> <template> <div class="message-box dialog-mask"> <div class="dialog-content"> <el-checkbox :indeterminate="isIndeterminate" v-mod...
elementui el-checkbox-group 自定义全选
李特成的博客
09-26 2736
<div class="itemTime"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox > <el-checkb...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
01-19
我使用的element-ui的版本是V1.4.13。 如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。 现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示： 为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。 1、在element-ui的button源码中加了自定义指令otherRender，以及一个局部组件vRender 2、局部组件vRender的写法：
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 631
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 22
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 856
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1201
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 204
【代码】[email protected]使用懒加载。
element ui el-checkbox-group 添加校验并且解决 点一个 全部选中
06-09
要为element ui的el-checkbox-group添加校验，可以通过在父组件中监听子组件的change事件，然后在事件处理函数中对选中的checkbox进行判断。如果没有选中任何一个checkbox，就提示用户进行选择。 以下是一个示例代码： ```html <template> <div> <el-checkbox-group v-model="checkedList" @change="handleCheckboxChange"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> <div v-if="!checkedList.length" style="color:red">请至少选择一个选项</div> </div> </template> <script> export default { data() { return { checkedList: [] }; }, methods: { handleCheckboxChange(val) { this.checkedList = val; } } }; </script> ``` 要解决“点一个 全部选中”的问题，可以通过在子组件的change事件处理函数中，判断当前checkbox是否是已选中的最后一个，如果是则将所有的checkbox都选中。以下是一个示例代码： ```html <template> <el-checkbox v-model="checked" @change="handleCheckboxChange">{{label}}</el-checkbox> </template> <script> export default { props: { label: String }, data() { return { checked: false }; }, methods: { handleCheckboxChange(val) { if (val && this.checked) { // 如果当前checkbox已选中，且是已选中的最后一个，则将所有的checkbox都选中 const checkboxGroup = this.$parent.$children.find( item => item.$options.name === "ElCheckboxGroup" ); if (checkboxGroup && checkboxGroup.checked.length === checkboxGroup.$children.length - 1) { checkboxGroup.checked = checkboxGroup.$children.map(item => item.label); } } } } }; </script> ``` 在父组件中使用自定义的el-checkbox组件即可，如下所示： ```html <template> <div> <el-checkbox-group> <custom-checkbox label="选项1"></custom-checkbox> <custom-checkbox label="选项2"></custom-checkbox> <custom-checkbox label="选项3"></custom-checkbox> </el-checkbox-group> </div> </template> <script> import CustomCheckbox from "@/components/CustomCheckbox"; export default { components: { CustomCheckbox } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值