element el-checkbox-group 的用法

最新推荐文章于 2024-07-24 10:28:16 发布
最新推荐文章于 2024-07-24 10:28:16 发布
阅读量1.8w 收藏 15
点赞数 6
分类专栏： element vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45753961/article/details/118542376
版权
本文详细探讨了Element UI中el-checkbox-group组件的lable属性使用技巧。lable属性至关重要，它决定了v-model绑定的数组内对象的内容。当lable设置为item的整个对象时，数组内将保存整个对象；而当lable指定为item的某个属性值，数组则只包含该属性值。通过示例代码和打印结果，文章清晰地展示了两种不同用法的差异和应用场景。
摘要由CSDN通过智能技术生成

el-checkbox的lable的用法很关键。

lable对应的是v-model绑定的数组里的对象。
例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。

data定义:

sendTypeList: [{
   
    value: 1,
    label: "手机短信"
  },
  {
   
    value: 2,
    label
最低0.47元/天 解锁文章
多思考多学习
关注
专栏目录
vue之ele中el-checkbox-group复选框组件的使用
weixin_47409897的博客
05-05 5288
目录vue之ele中el-checkbox-group复选框组件的使用Home.vueSetTeam.vue vue之ele中el-checkbox-group复选框组件的使用 Home.vue <!-- 描述： 作者：xzl 时间：05月05日160944 --> <template> <div> <div>checkedId - {{ checkedId }}</div> <el-checkbox-group
el-checkbox-group多选
Humor_L的博客
11-01 485
el-checkbox-的某些需求应用。
uni-app的checkbox-group
最新发布
weixin_48929505的博客
07-24 1207
uniapp chckbox-group复选框组实简单实现
【Vue3】el-checkbox-group实现权限配置和应用
weixin_47375144的博客
03-31 1383
Vue3 el-checkbox-group 数据选择和回显
element-ui 用el-checkbox-group 实现单选效果
努力搬砖的小码
04-29 841
element-ui 用el-checkbox-group 实现单选效果
el-check-group组件
qq_47099087的博客
06-03 572
el-checkbox-group
Element ui 丨el-checkbox-group 布局对齐
weixin_39142106的博客
03-20 1347
解决el-checkbox-group 布局对齐问题 方案一：通过el-row + el-col。方案二：通过设置flex布局实现。
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应的上级菜单也选中 若...
Vue el 使用el-checkbox-group复选框进行单选框操作
小菜鸟的博客
09-30 9569
让复选框进行单选框操作 el-checkbox-group这个组件与其他复选框不一样，我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage到我们写的类 <el-checkbox-group v-model="checked" size="medium"> <el-checkbox-button v-for="city in cities" :label="city" :key
el-checkbox-group多选和选择全部问题
qq_35469137的博客
03-01 1529
项目中有个需求 搜索学校的时候有选择全部和多选省份的功能 使用用element ui的多选功能 做些修改和封装。至于element的前面复选框的问题 样式里把复选框dispaly:none就可以了。
Ext checkBoxGroup的用法和取值
03-17
NULL 博文链接：https://lw671579557.iteye.com/blog/579242
el-checkbox-group修改默认样式，el-checkbox-group自定义样式案例
weixin_41346436的博客
09-05 3781
el-checkbox-group多选框修改默认样式
el-checkbox-group全选、单选实现
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
08-16 2458
页面结构： <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中循环多组checkbox-group
m0_57442975的博客
10-12 5920
1.因为官网给出的checkbox group绑定的数据格式是数组，而在项目中接收的数据通常是对象数组，我这里label绑定的是数组中对象的id属性，点击获取的是id的数组，在最后提交数据时需要做处理。2.一开始也尝试了label绑定整个对象，这样获取到的直接便是最终需要的对象数组，展示和添加是可以实现的，但是回显遇到了问题，在网上看是回显的数据格式要与选中的数组中对象的格式一致，尝试了没有效果，后面再研究一下。
elementUl的el-checkbox和el-select用法
吴小花的博客
11-24 3048
效果： 需求： 所有APP用户和指定分组用户可同时选。 分组用户可以多选。 难点： 当选择了分组后，自动勾选指定分组用户，删除了分组后，指定分组用户取消勾选。 遇到的问题： 一开始，我把el-select组件放在了el-checkbox里面，删除多选的分组后，总会影响el-checkbox的勾选，很难实现想要的效果。 解决方案： el-select放到el-checkbox外，慢慢实现了想要的效果。...
Element组件中el-checkbox的使用
last_TrobleMaker的博客
01-19 3784
在使用Elemet编辑前端页面中，也许会需要使用多选框。在Element中有官方设定好的标签el-checkbox的标签可以生成多选框。它2分为两种，一种是基础的多选框，还有一种是多选框组el-checkbox-group。 <el-checkbox v-model="checked">备选项</el-checkbox> 和 <el-checkbox-group ...
element el-checkbox-group 多选回显
weixin_43962877的博客
09-05 741
因为ElementUI已经封装好了，会自动匹配el-checkbox-group中v-model的数据和el-checkbox中v-for获取的数据值进行匹配，如果相同就会数据回显，显示已选。在el-checkbox-group的v-model数据需要和label标签值相同才能数据回显。
关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考
朱宏的博客
08-11 5952
我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下： <template> <el-checkbox-group v-model="checkedCities" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> &
el-checkbox-group用法
06-07
el-checkbox-group 是 Element UI 框架中的一个多选框组件，可以实现多个选项的选择。 使用方式如下： 1. 引入 Element UI 框架 ```js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 2. 在组件中使用 el-checkbox-group ```html <template> <div> <el-checkbox-group v-model="checkedCities"> <el-checkbox label="上海"></el-checkbox> <el-checkbox label="北京"></el-checkbox> <el-checkbox label="广州"></el-checkbox> <el-checkbox label="深圳"></el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { checkedCities: [] } } } </script> ``` 在上述代码中，el-checkbox-group 绑定了一个数组 checkedCities，用于存储被选中的选项的值。el-checkbox 组件中的 label 属性可以指定当前选项的值。 使用 v-model 指令可以实现双向绑定，即当选中的选项发生变化时，checkedCities 数组会自动更新，反之亦然。 以上是 el-checkbox-group 的基本用法，你可以根据自己的需求设置不同属性和样式来达到不同的效果。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值