uni-app根据后台数据动态生成树形checkbox，点击提交获取绑定checked项以及实现显示默认checked项

最新推荐文章于 2024-06-16 10:48:24 发布
最新推荐文章于 2024-06-16 10:48:24 发布
阅读量1.2k 收藏 5
点赞数 2
分类专栏： uniapp 文章标签： vue checkbox uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45959912/article/details/113308229
版权
本文介绍了如何在uni-app中利用组件动态生成树形checkbox，并详细讲解了设置默认选中项及点击提交获取绑定checked项的方法。通过组件的属性如`node-key`、`:defaultCheckedKeys`和`:props`，结合`@check`事件来实现功能。
摘要由CSDN通过智能技术生成

上次做的那个是个非树状的，这次我看从后台传过来的数据是树形的数据，前面的那个方法显然已经不适用了
先看做成的效果：
在这里插入图片描述

方法如下：
首先我们需要用到一个组件，tree树组件
这个组件和element中的el-tree差不多，用法上有一点点区别
下面就直接贴代码了

<template>
		    <ly-tree :tree-data="menuList" 
				ref
最低0.47元/天 解锁文章
田不甜 tbt
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uni-app根据后台数据、动态生成checkbox，点击提交获取绑定checked项以及实现显示默认checked项
qq_45959912的博客
01-22 1511
直接贴代码吧 <view class="user"> 为 <text class="username">{{user.userName}}</text> 分配角色 </view> <view class="uni-list"> <checkbox-group @change="checkboxChange"> <label class="uni-list-cell uni-list-ce
C#获取动态生成的CheckBox值
09-03
在本文中，我们将探讨如何在C#中动态生成和获取CheckBox控件的值，主要关注两种不同的实现方式。 **方法一：服务器容器控件中添加子控件** 在ASP.NET中，我们可以利用服务器端控件来动态创建CheckBox。这种方式的...
uni-app 开发APP动态设置check-box的选中
u013214797的专栏
08-12 4264
在使用uni-app框架开发的时候可能会有这么一场景就是通过业务代码动态设置check-box的选中，可以按以下方式做。 1. 首先编码实现checkBox选择变量和UI布局标签 ... <checkbox-group @change="checkBoxmA"> <checkbox value ='0' :checked="allCk" style="position: absolute; top: 0upx;left: 10upx;"> ...
uniapp中checkbox的可选数量控制及选中value获取
最新发布
学无止尽
06-16 639
使用element-ui时，可以使用checkbox组件的max、min属性直接控制最多、最少可以选中几个复选框。但使用uniapp时，没有max、min属性，应该怎么控制呢？3、监听复选框变更事件，获取该复选框变更事件（取消或选中）以及该复选框的name属性值，以便做业务处理。2、若已选数量为最大允许值，其他复选框变灰，不可再选，但已选复选框可以进行取消勾选；1、监听复选框组的变更事件，获取已选复选框的数量，判断已选数量是否为最大允许值；
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
lanbaiyans的博客
04-10 4523
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
uniapp - 树选择组件
weixin_42171053的博客
06-24 2321
文件夹形式树选择组件
uni-app-使用tkiTree组件实现树形结构选择(​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内)
路虽远行则将至，事虽难做则必成。
08-04 3140
在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
在Element UI中，`el-checkbox-group`组件和它的子组件`el-checkbox`是通过`v-model`与数据进行双向绑定的。默认情况下，如果绑定的数据不存在，Vue会将其初始化为一个布尔类型（`true`或`false`）。这就解释了为...
uniapp-table中改版uni-table插件
07-03
3. **单独修改某td的字体颜色**：在默认情况下，`uni-table`的样式可能无法满足所有需求，特别是当需要对某些特定单元格进行高亮显示时。开发者通过自定义样式或者动态设置样式，实现了对单个单元格字体颜色的控制，...
CheckBox控件默认选中,提交时永远获得选中状态的实现代码
10-22
2. 首次加载时，通过`CheckBoxBind`方法从数据库获取数据，并根据数据设置页面上的CheckBox控件的`Checked`属性。 3. 在CheckBox控件绑定前，确保`CheckBoxBind`方法在`!Page.IsPostBack`的条件下执行，以避免在回发...
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
checkbox选择框，在后台进行数据处理
coco_____的博客
05-06 641
在html界面 <li> <label style="background-color:#EEEEEE"></label> <input type="checkbox" value="teacher" id="checkbox1" name="checkbox" style="floa...
树形选择，多级列表的全选、不选联动，根据点击顺序显示在已选列表，用的是uniapp
qq_44869043的博客
05-26 1209
文章目录代码不是完整代码！不能直接复制粘贴components/selected-list/index.vuecomponents/people-list/index.vuecomponents/member-list/index.vue/pages/selectMan/index.vue全选、不选、联动选择逻辑 代码不是完整代码！不能直接复制粘贴 没有使用uniapp提供的 checkboxgroup 组件和它的 change 方法，不符合我们根据点击顺序排列到 已选列表 上。 componen.
vue2 uniapp Tree 树形控件基础 组件
HHH917的博客
02-09 2961
【代码】vue2 uniapp Tree 树形控件基础 组件。
uni-app树形列表（单选，多选）
liuye066的专栏
11-24 6238
多选： 使用的是插件市场的tree树组件（ly-tree) <ly-tree ref="tree" :treeData="treeData" v-if="ready" nodeKey="id" @node-expand="handleNodeExpand" @node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false" :defaultExpa
uni-app tree(树状) 组件
qq_42717015的博客
09-13 7258
uni-app tree(树状) 组件
uniapp无限级树组件，支持纯展示、单选、多选、多选联动等模式
weixin_41308436的博客
11-03 1728
1.支持纯展示2.支持单选（所有可选、只选子级俩种模式）3.多选（所有可选、只选子级俩种模式）4.多选联动。
uniapp在调用方法中获取checkbox的值
qq_44922777的博客
09-02 3363
uniapp在方法中获取复选框的值
uniapp 权限树模块- ly-tree组件
Listest的博客
11-30 7128
1.效果图 2.代码 <template> <view class="container"> <view class="itemTop"> <u-navbar back-text="返回" title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="true" :back-text-style="{'color':'#fff'}"
获取uni-app 循环生成checkbox 默认选中的值
06-09
你可以通过以下步骤获取uni-app循环生成的checkbox默认选中的值： 1. 在你的data里定义一个数组并初始化它的值，例如： ``` data() { return { checkboxList: [ { label: '选项1', value: '1', checked: true }, { label: '选项2', value: '2', checked: false }, { label: '选项3', value: '3', checked: true } ] } } ``` 其中，每个选项都有一个`checked`属性，用于表示该选项是否选中。 2. 在你的checkbox组件上使用`v-for`循环生成checkbox，并将每个checkbox的`checked`属性绑定到对应的数组元素的`checked`属性，例如： ``` <template> <div> <checkbox v-for="(item, index) in checkboxList" :key="index" v-model="item.checked">{{item.label}}</checkbox> </div> </template> ``` 这样就可以循环生成多个checkbox，并根据数组元素的`checked`属性来设置每个checkbox的选中状态。 3. 在其他地方使用`checkboxList`数组来获取所有checkbox的选中状态，例如： ``` console.log(this.checkboxList) // 输出[{label: '选项1', value: '1', checked: true}, {label: '选项2', value: '2', checked: false}, {label: '选项3', value: '3', checked: true}] ``` 这样就可以获取uni-app循环生成的checkbox默认选中的值了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

田不甜 tbt

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

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

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

打赏作者

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

抵扣说明：

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

余额充值