深入理解vue父子组件之从零开始Tree插件

àì夳堔傛蜴生んèń 2021-10-24 01:20 262阅读 0赞

\[TOC\]

*Tree树形控件在前端开发中必不可少，对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个Tree插件。*

# iview提供的控件 #

*  iview已经很成熟了，如果说我写的控件和iview提供的控件谁更好，那肯定是选择iview ， 手写控件只是为了更好的了解vue父子组件之间的通信的。 请读者还是不要拿我的控件和iview或者其他第三方的去对比。下面我们先来看看iview的Tree控件如何使用

<template>
        <Tree :data="data2" show-checkbox></Tree>
    </template>
    
    <script>
        export default {
            data () {
                return {
                    data2: [
                        {
                            title: 'parent 1',
                            expand: true,
                            children: [
                                {
                                    title: 'parent 1-1',
                                    expand: true,
                                    children: [
                                        {
                                            title: 'leaf 1-1-1'
                                        },
                                        {
                                            title: 'leaf 1-1-2'
                                        }
                                    ]
                                },
                                {
                                    title: 'parent 1-2',
                                    expand: true,
                                    children: [
                                        {
                                            title: 'leaf 1-2-1'
                                        },
                                        {
                                            title: 'leaf 1-2-1'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            }
        }
    </script>

*  上述的代码形成的效果如下

![iview树形图][iview]

*  在使用Tree控件时在Template中还有如下树形可以使用(根据自己需求)

![树形介绍][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70]

*  然后就是控件的一些事件捕获

![事件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70 1]

*  子节点的一些设置

![children][]

*  对于iview的Tree总结就是一句话：到位！。在这里小编也推荐大家使用iview来开发。这个框架对于后端程序员来说是个福利。因为我们不需要了解太专业的前端的只是就能够满足80%的需求了。

# 手写控件 #

同样的我们先来看看他的用法其实和iview一样。用我们封装好的模板就行了。下面是做一个部门树。部门下面挂着人员这个功能。

js就是去填补上述的数据，比如deptData、sysUserRole这些。至于这些属性代表什么意思我们先不着急看。先上个效果图。

![树形][20190819152453415.jpeg]

那么我们的zxhtree控件是在哪里注册的呢，这里被我们抽离在component.js里。`Vue.component('zxhtree', {});`继续在zxhtree里看除绑定的节点是`template: '#tree-template'`。tree-template的模板是在component.html中写好的

而在tree-template用到的tree-item控件才是真正的tree控件。这里是为了将树形包裹起来，所以才包裹了一层模板。tree-item对应的模板代码是

可以很明显的看到这里我们使用了递归进行展示树形结构。因为树形结构你无法确定层级。所以在里面又使用了针对子节点的展示`tree-item`.

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>含义</th> 
   <th>示例</th> 
  </tr> 
  <tr> 
   <td>treekey</td> 
   <td>内部树形展示</td> 
   <td>deptId</td> 
  </tr> 
  <tr> 
   <td>vistreekey</td> 
   <td>树形展示key</td> 
   <td>deptId</td> 
  </tr> 
  <tr> 
   <td>ids</td> 
   <td>默认显示的数据</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>names</td> 
   <td>默认显示的数据</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>treename</td> 
   <td>内部真是展示数据</td> 
   <td>deptName</td> 
  </tr> 
  <tr> 
   <td>vistreename</td> 
   <td>树形展示数据</td> 
   <td>deptName</td> 
  </tr> 
  <tr> 
   <td>treechildren</td> 
   <td>当前树的子节点数据</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>model</td> 
   <td>当前树的数据</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>(M)keyname</td> 
   <td>用于接受返回的数据</td> 
   <td>无</td> 
  </tr> 
 </tbody> 
</table>

# 手写控件扩展 #

控件接受数据处理逻辑

//接收到数据在外面套一层
    if(this.model[this.treekey]==undefined){
        this.treekey=this.vistreekey;
    }
    if(this.model[this.treename]==undefined){
        this.treename=this.vistreename;
    }
    if (this.model.disabled == true) {
        this.model.disabled = 'disabled';
    }
    console.log('组件注册了吗');
    if ((','+this.ids+',').indexOf(','+this.model[this.treekey]+',') == -1) {
        this.checkStatus = false;
        this.model.checkStatus=this.checkStatus;
    } else {
        this.checkStatus=true;
        this.model.checkStatus=this.checkStatus;
        this.treekeys[this.model[this.treekey]]= this.checkStatus;
        this.treenames[this.model[this.treename]]= this.checkStatus;
        this.opt.key=this.treekeys;
        this.opt['name']=this.treenames;
    }
    if(this.ids!=''){
        var idarr = this.ids;
        for(var index in idarr){
            this.treekeys[idarr[index]]=true;
        }
        if (this.names.indexOf(",") == -1&&this.names!='') {
            this.treenames[this.names]=true;
        }else{
            var namearr = this.names.split(",");
            for(var index in namearr){
                this.treenames[namearr[index]]=true;
            }
        }
    }

渲染默认数据

选择节点数据处理

if(selected instanceof MouseEvent){
        this.checkStatus=!this.checkStatus;
    }else{
        this.checkStatus=selected;
    }
    
    this.model.checkStatus=this.checkStatus;
    if (this.model.expected != true) {
        this.treekeys[this.model[this.treekey]]= this.checkStatus;
        this.treenames[this.model[this.treename]]= this.checkStatus;
        this.opt.key=this.treekeys;
        this.opt['name']=this.treenames;
    }
    for(var index in this.$refs.child){
        this.$refs.child[index].selectedObj(this.checkStatus);
    }
    
    this.$emit('keyname', this.opt);

# 手写控件总结 #

因为笔者是侧重后端，所以前端知识不是很好，这个组件写的也是很乱。这个组件是之前临时写的。里面没有进行系统的梳理，上述的逻辑也是很乱。读者需要的可以选择下列加入战队(\#addMe)联系我需要源码的可关注下面公众号发点击进群后咨询。

加入战队

### 加入战队 ###

## 微信公众号 ##

![微信公众号][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70 2]

# 主题 #

![封面][20190819152453805.jpeg]

[iview]: /images/20211023/1c193c0bbabb4b13b38f43c89f4621a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70]: /images/20211023/518a51e560e142ff880c58b86de7b9b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70 1]: /images/20211023/d1dd5e8934734a1ba40c683eb85e7b30.png
[children]: /images/20211023/f2ba8efa793f4aae84e211689ecb7975.png
[20190819152453415.jpeg]: /images/20211023/be52d47048e843eaae4aaea65448a339.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190819152453602.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxMzIwNTE=,size_16,color_FFFFFF,t_70
[20190819152453805.jpeg]: /images/20211023/0d82fe345ff64aa4858499910372f0a5.png