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>