Vue 树控件使用

1、前言
在最近的一个Vue项目中，需要显示一个区域信息，是有父子层级结构的，且需要实现以后不限制几级。

2、使用了作者李 维开源的一个树组件vue-ztree
其blog地址原创《开源一个用 vue 写的树层级组件 vue-ztree》

3、使用说明：
vue前端代码如下：

<template>

<div>

   <vue-ztree :list.sync='areaListData' :func='nodeClick' :is-open='true'>
   </vue-ztree>

</div>
</template>

<script>


import vueZtree from '../components/vue-ztree.vue'

export default {
    data() {
        return{
            areaListData:[]
        }
    },
    methods: {
        routerBack(){
            this.$router.go(-1);
        },
        getList(){

          this.$http.post(this.URL + '/mobile/getAreaListData.do',{yearMonth:'2017-10'})
            .then(function (res) {
                this.areaListData = res.data;
            })
            .catch(function (error) {
                this.$toast('查询区域异常');
            });
        },
        nodeClick:function(m, parent, trees){
            if(m.children.length > 0){
               this.$toast('请选择区、县');
            }else{
               this.$router.push({ name: 'meterUseNumPoint', params: { id: m.id,name:m.name ,pname:parent.name }})
            }
        }
        },
    components: {
       vueZtree
    },
    mounted () {
      this.getList()
    }
}

</script>

4、getAreaListData.do后台返回的数据如下：