vue-iview异步加载渲染树

<Tree v-show="curType=='archive'"  :data="archiveTree" :load-data="loadData" @on-select-change="selectChange" :show-check="false"> </Tree>
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)=>{
           const array=[] //创建一个数组
           console.log(res.data)
           for(let i=0;i<res.data.length;i++){
             let item=res.data[i]  
             array.push(item={id:item.id,title:item.title,loading:false,children:[],source:item})//将返回值赋值给新数组在这里可以给json对象添加属性
             if(item.source.leaf) delete item.loading
          }
          callback(array) /返回新数组
         })
       },
       selectChange(selectedList){
         //获取当前点击的节点
         const node = selectedList[selectedList.length - 1]
        this.$axios.post('/api/cate/SelectTrss',
               this.qs.stringify({
                   id: node.id                
                }))
               .then(res => {
                  const  list=[]
                  for(let i=0;i<res.data.length;i++){
                    let items=res.data[i]
                    list.push(items={title:items.name,type:'text'})
                  }
                   console.log(list)
                 this.fields= list;
              })
         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    //展开子节点
             })
           })
         }
       },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳~~~~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值