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后台返回的数据如下：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！