Vue.js组件tree实现省市多级联动

<template>
<div>
<treeview :model='treedata'></treeview>
</div>
</template>

<script>
import treeview from './treeview.vue'
export default {
 components: {
 treeview
 },
 props: {

 },
 method:{

 },
 ready:function(){

 },
 data(){
 return {
 treedata:{text:'地域',
 children: [{
 text: '中国',
 children: [{
  text: '陕西省',
  children: [{
  text: '西安市',
  children: [{
  text: '碑林区'
  }, {
  text: '雁塔区'
  }, {
  text: '未央区区'
  }, {
  text: '新城区'
  }]
  }, {
  text: '安康市'
  }, {
  text: '咸阳市',
  children: [{
  text: '秦都区'
  }, {
  text: '渭城区'
  }]
  }, {
  text: '渭南市'
  }]
 }, {
  text: '四川省',
  children: [{
  text: '成都市'
  }, {
  text: '绵阳市'
  }, {
  text: '广元市'
  }]
 }, {
  text: '安徽省'
 }]
 }, {
 text: '俄罗斯'
 }]}}
 }
 }
</script>

<style scoped>
ul,li{
 list-style-type: none;
}

</style>
<template>
 <li>
 <div @click='toggle'><span v-if='hasleaves'>[{{open ? '-' : '+'}}]</span>{{model.text}}</div>
 <ul>
 <treeview v-for='model in model.children' :model='model' v-show='open'></treeview>
 </ul>
 </li>
</template>

<script>
export default {
 name: 'treeview',
 props: {
 model: {
 type: object
 }
 },
 methods: {
 toggle:function(){
 this.open=!this.open;
 }
 },
 ready: function() {},
 computed:{
 hasleaves: function() {
 return this.model.children && this.model.children.length
 }
 },
 data() {
 return {
 open: false
 }
 }
}
</script>