element UI tree 控件，點擊父節(jié)點進行異步加載

點擊父節(jié)點，獲取該節(jié)點的id，然后渲染成子節(jié)點，
目前id已獲取，子節(jié)點數(shù)據(jù)也請求到了，不知道怎么渲染到該節(jié)點下面
看官方介紹有一個load參數(shù)--加載子樹數(shù)據(jù)的方法，有沒有用過的同志來指導一下怎么用
圖片描述

    <el-tree
      :props="props1"
      :load="loadNode1"
      node-key="id"
      ref="tree"
      highlight-current
      lazy
      show-checkbox
      @node-click="handleNodeClick">
    </el-tree>

loadNode(node, resolve){
        console.log(node);
        // if (node.level === 0) {
        //   return resolve([{ name: 'region' }]);
        // }
        // if (node.level > 1) return resolve([]);
        // setTimeout(() => {
        //   const data = [];
        // 
        //   resolve(data);
        // }, 500);


      },
     getClickchild(id) {
        alert(id)
        axios.get('/api/bank/oprtion/oprtionList.do?id='+id)
        .then(function(res) {
          console.log(res.data)
          loadNode
        })
        .catch(function(error) {
          console.log(error)
        })
     },
     handleNodeClick(data) {
       // this.clickId = data.id
       console.log(data.id);
       this.getClickchild(data.id)
     }}

回答

編輯回答

笨笨噠

html:

<el-tree
    :props="props"
    :load="loadNode"
    node-key="id"
    ref="tree"
    highlight-current
    lazy
    show-checkbox
    @node-click="handleNodeClick">
  </el-tree>

data:

props: {
    label: 'indexName',
    children: [],
    isLeaf: 'leaf'
  }

js:

// 異步樹節(jié)點點擊事件
    handleNodeClick (data) {
      console.log('node', data)
    },
    // 異步樹葉子節(jié)點懶加載邏輯
    loadNode (node, resolve) {
      // console.log(node, resolve)
      // 一級節(jié)點處理
      if (node.level === 0) {
        this.requestTree(resolve)
      }
      // 其余節(jié)點處理
      if (node.level >= 1) {
        // 注意！把resolve傳到你自己的異步中去
        this.getIndex(node, resolve)
      }
    },
    // 異步加載葉子節(jié)點數(shù)據(jù)函數(shù)
    getIndex (node, resolve) {
      this.$AxiosAjax({
        loading: true,
        url: API_BASICQUOTA.getCatalogInfoByLevel,
        params: {id: node.data.id, level: node.data.level + 1 + '', type: 'all'}
      }).then(res => {
        if (res.data.code === '200') {
          // 處理節(jié)點是否是葉子節(jié)點
          res.data.catalogInfo.forEach(et => {
            if (et.isIndex === '1') {
              et.leaf = true
            } else {
              et.leaf = false
            }
          })
          let data = res.data.catalogInfo
          console.log(data)
          resolve(data)
        }
      })
    },
    // 首次加載一級節(jié)點數(shù)據(jù)函數(shù)
    requestTree (resolve) {
      this.$AxiosAjax({
        loading: true,
        url: API_BASICQUOTA.getCatalogInfoByLevel,
        params: {id: '', level: '1', type: 'all'}
      }).then(res => {
        if (res.data.code === '200') {
          // 處理節(jié)點是否是葉子節(jié)點
          res.data.catalogInfo.forEach(et => {
            if (et.isIndex === '1') {
              et.leaf = true
            } else {
              et.leaf = false
            }
          })
          let data = res.data.catalogInfo
          resolve(data)
        }
      })
    }

2018年3月28日 09:01

編輯回答

菊外人

剛剛解決。
首先文檔的setTimeout,其實就是異步加載；
還是上代碼吧。
我用的axios，都一樣。
例：

    loadNode(node, resolve) {
      if (node.level == 1) {
        console.log(node.data);
        //注！把resolve傳到你自己的異步中去
        this.getUser(node.data.fence, node.data.id, resolve);
      }

      // setTimeout(() => {
      //   var data;
      //   if (hasChild) {
      //     data = [
      //       {
      //         name: "zone" + this.count++
      //       },
      //       {
      //         name: "zone" + this.count++
      //       }
      //     ];
      //   } else {
      //     data = [];
      //   }
      //   resolve(data);
      // }, 500);
    },

然后就是異步

//偽代碼
getUser(node.data.fence, node.data.id, resolve){
    axios.post().then(res=> {
        let data = res.data;//改成tree需要的格式
        
  
        
        resolve(data);//解決？
    })
}

以上。
另外，element的文檔確實有點問題啊。需要仔細領(lǐng)悟。

2017年12月1日 04:01

編輯回答