如何实现vue的tree组件

前言

Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。

效果

节点可以无限的递归延伸
可以展开和收起子节点
如果子节点全部选择对应的父节点也应该选中，反之父节点取消选中对应子节点也需要取消选中

API

prop传递data属性，来描述所有的节点的信息

每个节点的配置描述如下

  • title： 展示的标题
  • expand 是否展开节点
  • checked 是否选中节点
  • children 子节点

以及还有两个event

  • on-toggle-expand 展开和收起子列表时触发的
  • on-check-change 点击checkbox触发

我们来 init tree主组件

首先需要考虑一个问题因为tree是递归遍历的，因为我们需要创建一个入口组件还有一个递归children的组件。

首先创建我们的tree组件

我们在初始化以及watch监听的时候重新深拷贝了一下prop传来的data并赋值给了cloneData

然后在template里来引入node.vue，然后循环cloneData来循环node.vue。node.vue接受两个prop

showCheckbox 就是tree组件接收的 showCheckbox 这里传给node组件来判断展示
data 为item 是一个object 负责渲染当前节点，如果当前节点有children 那就递归调用本身来递归渲染
这是使用了一个deepCopy的方法，这个是深拷贝的简单实现，递归的去重新重新赋值data数组，开辟新的堆内存与传入的数据无关联。不会破坏原有的数据

我们来 init node递归组件

node组件为主要组件，主要功能是展示当前项的title 以及 如果有children时递归本身。

  • 展开关闭按钮
  • checkbox
  • 节点的title
  • 递归

node的基本构造

prop中的data就是当前节点的所有信息，比如说是否展开和关闭当前的节点，是否选中，title标题以及children的子节点数组。

  • expand 判断条件为 data.children &&  data.children.length 才会展示 + 或者 - 按钮
  • checkbox就是当前的节点是否需要默认勾选

点击 + 号时会展开当前的子节点，点击 - 号会关闭，这一步只需要在handleExpand 中修改data的expand数据即可同时我们还需要触发一个emit来提示用户展示或者收起了节点

这里有一点需要注意 修改data.expand我们通过 VUE的 $set 并没有像下面这样

this.data.expand = !this.data.expand;

这里有什么区别呢？如果直接用上面的代码进行修改，就会发现数据虽然被修改了，但是视图没有被更新，这是因为这里的this.data 时props通过上一级传递出来的，也有可能时node递归传递的，无论如何咱们需要的cloneData里的节点数据，此时不一定初始化定义时就含有expand或者checked字段 如果不含有直接通过this.data.expand修改，这个expand时不可响应式的数据，所以视图不会被更新，干脆就直接用$set来改变

接下来我们就需要处理响应状态了，大家可能觉得不就是选中和取消吗 的确这样可以，但是树组件时有上下级关系，他们分为两种逻辑，当选中（或取消选中）一个节点时

  • 它下面的所有子节点都会被选中
  • 如果同一级所有子节点选中时，它的父级也自动选中，一直递归判断到根节点。

第 1 个逻辑相对简单，当选中一个节点时，只要递归地遍历它下面所属的所有子节点数据，修改所有的 checked 字段即可

再来看第2个逻辑 一个节点，除了手动选中（或反选），还有就是第 2 种逻辑的被动选中（或反选），也就是说，如果这个节点的所有直属子节点（就是它的第一级子节点）都选中（或反选）时，这个节点就自动被选中（或反选），递归地，可以一级一级响应上去。有了这个思路，我们就可以通过 watch 来监听当前节点的子节点是否都选中，进而修改当前的 checked 字段：

在 watch 中，监听了 data.children 的改变，并且是深度监听的。这段代码的意思是，当 data.children 中的数据的某个字段发生变化时（这里当然是指 checked 字段）,也就是说它的某个子节点被选中（或反选）了，这时执行绑定的句柄 handler 中的逻辑。const checkedAll = !data.some(item => !item.checked); 也是一个巧妙的缩写，checkedAll 最终返回结果就是当前子节点是否都被选中了。

这里非常巧妙地利用了递归的特性，因为 node.vue 是一个递归组件，那每一个组件里都会有 watch 监听 data.children，要知道，当前的节点有两个”身份“，它既是下属节点的父节点，同时也是上级节点的子节点，它作为下属节点的父节点被修改的同时，也会触发上级节点中的 watch 监听函数。这就是递归。

结语

递归的可以把一个大问题通过不断调用自身的方式，使代码简洁的实现功能，但是个别问题像算法中斐波那契数列如果使用递归就会使得时间复杂度以及空间复杂度会飙升。总的来说要合理运用，活学活用。

以上就是如何实现vue的tree组件的详细内容，更多关于vue tree组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue.js组件tree实现无限级树形菜单

    Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

  • 在vue中使用vant TreeSelect分类选择组件操作

    中文文档:TreeSelect 分类选择 效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van

  • Vue使用zTree插件封装树组件操作示例

    Vue使用zTree插件封装树组件操作示例

    本文实例讲述了Vue使用zTree插件封装树组件操作.分享给大家供大家参考,具体如下: 1.通过npm安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquery module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': reso

  • Vue组件tree实现树形菜单

    Vue组件tree实现树形菜单

    vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息 用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录

  • Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

    Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现

    写在前面 首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不能带给你及时的帮助.这个组件的开发预计写两篇文章,一遍写组件,一篇写组件逻辑.这篇文章也是我自己开发的从无到有的过程,所以它可以为你提供一些Tree组件开发的思路,代码写到一定程度,不能完全依赖插件了,有时间可以看看插件源码或者动手去开发,这样真的能加深对技术的掌握程度. 开发过程 1.数据仓库-Vuex 2.组件的循环创建-递归组件 需求决定了我的技术选型,项目需求是一个中国各级政

  • Vue2组件tree实现无限级树形菜单

    Vue2组件tree实现无限级树形菜单

    一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst

  • Vue.js组件tree实现省市多级联动

    Vue.js组件tree实现省市多级联动

    小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo

  • 如何实现vue的tree组件

    如何实现vue的tree组件

    前言 Tree一直是大家熟知的组件,做一些大型的后台管理系统都会用到.使用树组件可以完整的展现其中的层级关系,并具有展开收起选择等交互功能. 效果 节点可以无限的递归延伸 可以展开和收起子节点 如果子节点全部选择对应的父节点也应该选中,反之父节点取消选中对应子节点也需要取消选中 API prop传递data属性,来描述所有的节点的信息 每个节点的配置描述如下 title: 展示的标题 expand 是否展开节点 checked 是否选中节点 children 子节点 以及还有两个event on

  • vue递归实现自定义tree组件

    vue递归实现自定义tree组件

    本文实例为大家分享了vue递归实现自定义tree组件的具体代码,供大家参考,具体内容如下 1. 在tree/index.vue中: <template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { componen

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • Vue.js递归组件构建树形菜单

    Vue.js递归组件构建树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component> }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜

  • 用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    用 Vue.js 递归组件实现可折叠的树形菜单(demo)

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形

  • vue文件树组件使用详解

    本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue github] demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm 首先是html模板: <li> <div //文件夹加粗表示 :class="{bold: isFolder}" //处理单击事件 打开闭合文件列表 @click="toggle" //处理双击事件 双击子

  • vue+element树组件 实现树懒加载的过程详解

    一.页面样式 二.数据库 三.前端页面代码 <template> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree> </template> <script> export default { data () { return { props: { label: 'name', children: 'zones',

  • vue用递归组件写树形控件的实例代码

    最近在vue项目中遇到需要用树形控件的部分,比如导航目录是不确定的,所以必须要用树形结构,不管导航目录有几级,都可以自动显示出来,我一开始觉得element-ui有树形控件,不需要自己写,调用就可以了,后来才发现,调用完事之后,样式不可控,而且要加东西特别困难,无法满足项目需求,于是,一首<凉凉>送给自己,后来去翻vue官网,发现居然有递归组件,一开始我写了两个组件,互相调用,可以写出来,后来返现,如果项目要用到5棵树,我要写10个组件,而且样式控制起来超级恶心,于是我就各种查资料,原生的也试

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    引言 最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树

  • 不依任何赖第三方,单纯用vue实现Tree 树形控件的案例

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态,所以不是太好看,需要的自行修改就好) 我直接用的vue-cli搭建的项目,代码目录如下: 使用方式如下: treeData的格式如下: treeData: [ {open: false, name: '1', level: 0, checked: true}, { open: false, // o

随机推荐