井井客

搜索

VUE如何渲染树型结构

说到渲染树型结构想到的应该是ztree,并且搜索的话也是有vue-ztree组件可以使用。但是在vue中渲染树的原理到底是什么呢?来来来~

VUE如何渲染树型结构

官方也有关于tree渲染的一个例子:https://github.com/vuejs/vue/tree/dev/examples/tree
但也因为这只是一个例子,代码混在一起,不仔细阅读,理解起来还是有一点阻碍。
实际中因为我们是spa项目,可以利用全局组件来制作tree组件,让代码更清晰。

说一说我理解出的例子,完成tree渲染需要的基础是html的结构,设定为ul-li-ul这样的一种嵌套结构。没错,嵌套就是实现VUE tree组件的核心,我们需要让组件嵌套它本身(所以将它注册为全局组件更方便这种嵌套)。

VUE如何渲染树型结构

像图上所示的,左侧的就是html结构,右侧是组件嵌套。html结构应该不用多说吧,详细说说组件的结构。

看着示例的结构图比较简单(起码比html结构看上去结构),但是在数据的渲染细节上面需要想得就要稍多一点。

拿我自定义的一个tree组件为例,因为接口设计问题,这种是一步一步实现查询子公司的树,代码如下:

<template>
  <li>
    <div :class="[{title:isFolder},{sub:!isFolder},{on: open}]" @click='changeCid(model.id)'><span @click="toggle"></span>{{model.name}}</div>
    <ul v-show="open" v-if="isFolder">
      <tree v-for="item in childData" :model="item" @changeCid='changeCid'></tree>
    </ul>
  </li>
</template>
<script>
export default {
    data(){
      return {
        open: false,
        isFolder:true,
        childData:[]
      }
    },
    methods:{
      toggle: function (e) {
        e.stopPropagation();
        //查询是否有子公司
        this.$ajax('companymng/querychildcompany.json',{ companyId : this.$options.propsData.model.id },(rs)=>{
          //判断是否有搜索结果
          if(rs.data.length>0){
            this.isFolder = true;
            this.childData = rs.data;
          }else{
            this.isFolder = false;
          }
        },()=>{
          this.isFolder = false;
        })
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeCid(value){
        this.$emit('changeCid',value)
      }
    },
    props:['model']
  }
</script>

另外还有一种,一次性查询渲染树的组件,如下:

<template>
  <li>
    <div :class="[{title:isFolder},{sub:!isFolder},{on: open}]" @click='sendData(model)'><span @click="toggle"></span>{{model.name}}</div>
    <ul v-show="open" v-if="isFolder">
      <meterialTree v-for="item in model.children" :model="item" @sendData='sendData'></meterialTree >
    </ul>
  </li>
</template>
<script>
export default {
    data(){
      return {
        open: false,
        isFolder:false
      }
    },
    methods:{
      toggle: function (e) {
        e.stopPropagation();
        this.open = !this.open
      },
      sendData(obj){
        this.$emit('sendData',obj)
      }
    },
    props:['model'],
    mounted:function(){
      var model = this.$options.propsData.model;
      if(model.children !== undefined && model.children.length > 0){
        this.isFolder = true
      }
    }
  }
</script>

看看它们的共同点就是:
1、template中的ul下都嵌套了它们本身,并且有循环、传递model以及用于接收的事件。 2、组件本身接受一个props:model,这个与上一点中的传递model也有一种对应的关系

不同点一眼就能发现:toggle事件,上面的toggle事件每次会发送ajax才能拉取到children,而下面的则在视图中使用这个组件时,就已经通过model传递进来了。

<ul class="select-tree">
  <meterialTree v-for='model of treeList' :model='model' @sendData='getMeterialData'></meterialTree>
</ul>

看到这里会不会隐隐已经知道大概是怎么一回事了呢?

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:VUE如何渲染树型结构
本文链接:http://www.jingjingke.com/c/30274.html

上一篇:JS分割字符串与拼接数组
下一篇:JQ简易版图片预览功能(仅支持到IE9)

文章分类

相关阅读

随便看看