深刻理解vue父子組件之從零開始Tree插件

時間 2019-11-30

標籤深刻理解 vue 父子組件開始 tree 插件简体版

原文原文鏈接

[TOC]html

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>


複製代碼

上述的代碼造成的效果以下

在使用Tree控件時在Template中還有以下樹形可使用(根據本身需求)

而後就是控件的一些事件捕獲

子節點的一些設置

對於iview的Tree總結就是一句話：到位！。在這裏小編也推薦你們使用iview來開發。這個框架對於後端程序員來講是個福利。由於咱們不須要了解太專業的前端的只是就可以知足80%的需求了。

手寫控件

一樣的咱們先來看看他的用法其實和iview同樣。用咱們封裝好的模板就好了。下面是作一個部門樹。部門下面掛着人員這個功能。vue

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

複製代碼

js就是去填補上述的數據，好比deptData、sysUserRole這些。至於這些屬性表明什麼意思咱們先不着急看。先上個效果圖。node

那麼咱們的zxhtree控件是在哪裏註冊的呢，這裏被咱們抽離在component.js裏。Vue.component('zxhtree', {}); 繼續在zxhtree裏看除綁定的節點是template: '#tree-template'。 tree-template的模板是在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>

複製代碼

而在tree-template用到的tree-item控件纔是真正的tree控件。這裏是爲了將樹形包裹起來，因此才包裹了一層模板。 tree-item對應的模板代碼是後端

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

複製代碼

能夠很明顯的看到這裏咱們使用了遞歸進行展現樹形結構。由於樹形結構你沒法肯定層級。因此在裏面又使用了針對子節點的展現tree-item.bash

屬性	含義	示例
treekey	內部樹形展現	deptId
vistreekey	樹形展現key	deptId
ids	默認顯示的數據	無
names	默認顯示的數據	無
treename	內部真是展現數據	deptName
vistreename	樹形展現數據	deptName
treechildren	當前樹的子節點數據	無
model	當前樹的數據	無
(M)keyname	用於接受返回的數據	無

手寫控件擴展

控件接受數據處理邏輯微信

//接收到數據在外面套一層
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;
        }
    }
}

複製代碼

渲染默認數據框架

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

複製代碼

選擇節點數據處理iview

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

複製代碼