欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于vue手写tree插件那点事

程序员文章站 2022-07-04 17:50:15
[TOC] Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示。因为大数据全部展示出来对于用户来说是不友好的。今天我们自己手写一个Tree插件。 iview提供的控件 iview已经很成熟了,如果说我写的控件和iview提供的控件谁更好,那肯定是选择iview , 手写控件 ......

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>

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

基于vue手写tree插件那点事

  • 在使用tree控件时在template中还有如下树形可以使用(根据自己需求)

基于vue手写tree插件那点事

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

基于vue手写tree插件那点事

  • 子节点的一些设置

基于vue手写tree插件那点事

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

手写控件

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

<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这些。至于这些属性代表什么意思我们先不着急看。先上个效果图。

基于vue手写tree插件那点事

那么我们的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.

属性 含义 示例
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);

选择节点数据处理

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)联系我
需要源码的可关注下面公众号发点击进群后咨询。

加入战队

# 加入战队

微信公众号

基于vue手写tree插件那点事

主题

基于vue手写tree插件那点事