[TOC]

Tree tree control is indispensable in front-end development, and now most websites display data in tree form. Because it's unfriendly for users to display all the big data. Today we handwritten a Tree plugin ourselves.

iview provides controls

• IView is already mature, if I write the control and iView provides the control who is better, it must be the choice of iview, handwritten control is only to better understand the communication between vue parent and child components. Readers should not compare my controls with iView or other third parties. Let's first look at how iview's Tree control works

<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>

• The effect of the above code formation is as follows

• There are also the following tree shapes available in Template when using Tree controls (depending on your needs)

• Then there's some event capture for the control

• Some settings for subnodes

• The summary of iview Tree is one sentence: in place! Here we also recommend iview for development. This framework is a benefit for back-end programmers. Because we don't need to know too professional front-end is only able to meet 80% of the demand.

Handwritten controls

Again, let's first look at his usage, which is actually the same as iview. Just use our encapsulated template. Here's a section tree. Under the Department hangs the function of personnel.

<zxhtree
        v-if="userChange"
        class="item"
        treekey="deptId"
        treename="deptName"
        treechildren="children"
        :model="deptData"
        :ids="sysUserRole.deptIds"
        :names="sysUserRole.deptNames"
        @keyname="selectedUserObj"
>
</zxhtree>

js is to fill in the above data, such as deptData, sysUserRole. Let's not rush to see what these attributes mean. Let's start with the rendering.

So where is our zxhtree control registered? Here we pull it out of component.js. Vue.component('zxhtree', {});
Continue to see in zxhtree that the bound node is template:' tree-template'.
The template for tree-template is written in component.html

<script type="text/x-template" id="tree-template">
    <div>
        <tree-item
                class="item"
                :treekey="treekey"
                v-for="(model, index) in model"
                :treename="treename"
                :treechildren="treechildren"
                :model="model"
                :ids="ids"
                :names="names"
                @keyname="selectedObj"
                @data="synchdata"
        >
        </tree-item>
    </div>
</script>

The tree-item control used in tree-template is the real tree control. This is to wrap the tree, so we wrapped a template.
The corresponding template code for tree-item is

<script type="text/x-template" id="item-template">
    <ul class="ztree">
        <li class="level0" @blur="blur" @focus="focus" tabindex="0" hidefocus="true" treenode="">
            <input type="checkbox" :disabled="model.disabled" :ref="model[treename]" :checked="checkStatus" @click="selectedObj"/>
            <span title="" @click="toggle" :class="openStatus" treenode_switch=""></span>
            <a :class="selectClass" treenode_a="" onclick="" target="_blank" style="" :title="model[treename]">
                <span title="" treenode_ico="" class="button ico_open" style=""></span>
                <span @dblclick="toggle" class="node_name">{{model[treename]}}</span>
            </a>
            <tree-item
                class="item"
                v-show="open"
                v-for="(model, index) in model[treechildren]"
                :key="index"
                :model="model"
                :treekey="treekey"
                :treename="treename"
                :vistreekey="vistreekey"
                :vistreename="vistreename"
                :treechildren="treechildren"
                ref="child"
                @keyname="keyname"
            >
            </tree-item>
        </li>
    </ul>
</script>

It's obvious that we use recursion to show the tree structure here. Because of the tree structure, you can't determine the hierarchy. So it uses the display tree-item for the child node.

Handwritten Control Extension

Control accepts data processing logic

//The received data is coated with a layer
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('Has the component registered?');
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;
        }
    }
}

Render default data

var newOpt ={'key':{},'name':{}};
    newOpt.key = Object.assign(this.opt.key, opt.key);
    newOpt.name = Object.assign(this.opt.name, opt.name);
    var flag=false;
    for(var index in this.model[this.treechildren]){
        if(newOpt.key[this.model[this.treechildren][index][this.treekey]]!=true){
            flag=true;
        }
    }
    if(!flag){
        newOpt.key[this.model[this.treekey]]=true;
        newOpt.name[this.model[this.treename]]=true;
        this.checkStatus=true;
        this.model.checkStatus=true;
    }
    for(var key in newOpt){
        this.filterRealCheck(newOpt[key]);
    }
    this.opt=newOpt;
    this.$emit('keyname', newOpt);

Select Node Data Processing

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);

Summary of Handwritten Controls

Because the author is focused on the back end, so the front-end knowledge is not very good, this component is also very messy. This component was written temporarily before. There is no systematic sorting out, and the above logic is very confusing. Readers can choose to join the team (# addMe) to contact me as follows
Need source code can be concerned about the following public number click into the group after consulting.

Join the team

<span id="addMe">Join the team</span>

Wechat Public Number