vue项目实战系列二十二：ivew tree组件

<Tree :data="archiveTree" :load-data="loadData" @on-select-change="selectChange" :show-check="false" />

data () {
	return {
		archiveTree:[],树的集合
		id:-1,//根节点
	}
}
mounted() {//生命周期函数，页面刷新时调用此方法初始化树
	this._loadData(this.id,(array) =>{
		this.archiveTree=array
	})
},
methods: { 
loadData (item, callback) {//异步加载的方法 
	this._loadData(item.id,callback)
},
_loadData(code,callback){ //发送请求并且对后台的数据进行处理
	this.$axios.get('/api/cate/SelectNode?pcode='+code).then((res)=>{
		callback(res.result) // 返回新数组
	})
},
selectChange(selectedList){
	// 获取当前点击的节点
	const node = selectedList[selectedList.length - 1]
	if (node) {
		this._loadData(node.id,(res) => {
			if(!res) return // 没有子节点则返回
			let array=[]
			res.forEarch(item => {// 遍历子节点然后在各子节点上递归调用请求下一层后代
				array.push(item)
				this._loadData(item.id,() => {
				})
				node.children=array // 挂载子节点
				node.expand=true    // 展开子节点
			})
		})
	}
},