VUE的checkedBox选中父类遍历子类的方法

最新推荐文章于 2023-03-29 15:10:17 发布
最新推荐文章于 2023-03-29 15:10:17 发布
阅读量503 收藏
点赞数
分类专栏： 前端开发
本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。
本文链接：https://blog.csdn.net/bbs11007/article/details/111474259
版权
本文介绍了在Vue中处理tree结构时，如何实现checkedBox选中父类并遍历子类的方法。文章提到已封装了一个My-tree.vue组件，并提供了checkChange方法的代码实现，通过递归完成选中操作。文中还展示了广东省的tree结构示例。
摘要由CSDN通过智能技术生成

tree结构方法可以参考elementUI官网<el-tree></el-tree>方法。 我这边已经封装了tree的方法，这块部分略！这里目的是选中父类如何遍历子类的方法。

 

封装的My-tree.vue

略！！！

<el-tree>
   可参考这个组件，自己封装
        
</el-tree>

 

引用：封装的VUE的tree

<My-tree
            ref="Mytree"
            slot="sidebar"
            :data="tree.data"
            height="5rem"
            @check-change="checkChange"
            style="margin-top: 0.1rem;">
</My-tree>

>然后就实现checkChange选中checkedBox的方法，先上代码后讲解（注意看备注）。

 

  checkChange(data, node){ //选中的功能方法，你的t
最低0.47元/天 解锁文章
测试狂人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
制作一个CheckListBox控件
老周——“易之道”
04-27 7352
虽然CodePlex上的WPF扩展的XXX ToolKit源码中有一个CheckListBox控件，但是，就看它那源代码，也过于复杂了。并且，我也希望自己来编写一个CheckListBox控件。 所谓CheckListBox控件嘛，就是既可以Select又可以Check的ListBox控件。有人会说，不用写控件，自定义一个ListBoxItem的模板就行了，也确实可以这样做，不过，还是有些问题的
checkedbox选中的几种方式
u011431550的专栏
09-10 3569
一、选中checkedbox的三种方式 1、 if ($("#checkbox-id").get(0).checked) {     // do something } 2、 if($('#checkbox-id').is(':checked')) {     // do something } 3、 方法三： if ($('#checkbox-id').at
vue3 组件篇 Checkbox
秋来九月八
10-01 7905
实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。
vue中遍历的使用方法
m0_62487693的博客
02-23 524
数组元素，结构，类型 要一致 例如：数组元素为对象，每个对象下的key值都是一样的，value不一样。
Vue3多选框（Checkbox）
Mr Dear的博客
03-29 8447
多选框组件，用于在一组可选项中进行多项选择，功能丰富，简单易用，满足你的所有幻想😁
vue 父组件中调用子组件函数的方法
12-11
Vue提供了一种机制，允许父组件直接调用子组件的方法。以下是一个详细的说明，如何在Vue中实现这一功能。 ### 1. 定义`ref` 首先，你需要在子组件模板中添加一个`ref`属性。`ref`是Vue中用于创建引用的一个特殊...
vuequery:轻松遍历Vue的组件树
05-02
Vue查询 轻松遍历的组件树。 重要信息：Vue的React/事件系统非常强大且灵活，应涵盖99.99％的用例。 实际上，必须遍历组件树几乎总是意味着您在做Vue错误。 但是，在某些情况下需要这样做时，本库旨在为您提供帮助。...
vue遍历生成的输入框 绑定及修改值示例
01-19
对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作。这种操作的难点在于生成数量的不确定，不能在在组件中的data直接定义。 思路 获取生成的输入框数量 初始化数组，数组的长度与待...
vue 解决遍历对象显示的顺序不对问题
10-16
在Vue.js开发过程中，我们经常会遇到遍历对象并将其内容展示在页面上的需求。然而，JavaScript的对象属性并没有天然的顺序，这可能导致在遍历时显示的顺序与预期不符。本篇文章将详细介绍如何解决Vue中遍历对象显示...
vue 实现单选框设置默认选中值
10-16
在本文中，我们将深入探讨如何在Vue中实现单选框的默认选中值，并提供一个实际的示例。 首先，我们需要了解Vue中的`v-model`指令。`v-model`用于双向数据绑定，它将表单控件的值与Vue实例的数据属性关联起来。在...
定义类Box，Fruit（父类），Apple，Pear，Orange，水果类中重写toString（）方法，添加取出水果的方法参数类型为父类类型。
Happy_change的博客
12-26 793
定义类Box，Fruit（父类），Apple，Pear，Orange，水果类中重写toString（）方法，添加取出水果的方法参数类型为父类类型。 public class Fruit { public int weight; public String color; public Fruit(int weight, String color){ this.weight=weight; this.color=color; } public void getFruit(){ System
vue之day03：案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互
Yydsaoligei的博客
10-26 648
案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互
checklistbox的用法
a594455873的专栏
11-27 177
一般认为：foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值。其实这里遍历的只是高亮的值并不是打勾的值。遍历打勾的值要用下面的代码：for (int i = 0; i < checkedListBox1.Items.Count; i++){ if (checkedListBox1.GetItemCheck...
子类与父类的小关系：盒子套盒子
weixin_30843605的博客
05-21 231
classProgram { staticvoidMain(string[]args) { InBoxson=newInBox(); son.m1(); son.m2(); ...
checkedlistbox(checkedlistbox用法)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 678
C# checkedListBox 全选与反选。 客户端实现，去掉了多余的内容，选择其中一种方法。 PS：如果不是使用jQuery,注意CheckBoxList 的ID不要和其它CheckBox ID在客户端的混淆 function onCheckAll() { var f=document.getElement...
checkbox勾选变色与全选的一个实现(parentNode,parentElement区别对比)
jdhh_hcm
05-24 325
管理该分类下的供应信息：（这是一个代码备份） 发上来才发现 选择select 的时候，应该判断一下select的选中项是否为""，不为空且点选信息的话，就提交。   &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;管理该分类下的供应信息&
vue封装element-ui的el-checkbox实现嵌套多选组件
一个写Bug的切图仔
01-11 3940
vue封装element-ui的el-checkbox实现嵌套多选组件 要实现的效果 如何使用 <multi-check-list :dataList="dataList" :isCheckAll='true' @change="handlerDataCheck"></multi-check-list> import MultiCheckList from './multiCheckList.vue'; data() { return { dataList:[{
vue项目input标签checkbox，change和click绑定事件的区别
秋来九月八
12-15 7294
我们经常在vue开发项目的过程中，遇到需要对input框使用v-modal的这种情况，在有的时候，不光需要双向数据绑定，还需要在改变数据之后绑定其它的操作，那么问题来了，你是使用@change绑定事件还是使用@click绑定事件 建议不要通过click绑定事件，对待input标签，最好通过change来触发，本人血的教训。 <input @change="inputchecked" clas...
javascript实现多选
WQ的技术分享
11-21 1105
html代码 js代码 var app = new Vue({ el : “.box”, data : { cities : [“上海”,“北京”,“广州”,“重庆”,“西安”], arr : [] }, methods :{ checkedBox(i){ if(this.arr.includes(i)){ //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次
vue方法中怎么遍历数组
最新发布
05-11
在Vue.js中，可以使用v-for指令来遍历数组。v-for指令用于渲染一个列表，它需要一个形如“item in items”的表达式，其中item是每个迭代的别名，items是源数据数组。例如，以下代码可以在模板中输出数组中的每个元素： ``` <template> <div> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { items: ['apple', 'banana', 'orange'] } } } </script> ``` 在这个例子中，v-for指令会循环遍历items数组，并将每个元素赋值给item变量，然后在模板中输出每个元素的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

测试狂人

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

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

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

打赏作者

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

抵扣说明：

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

余额充值