el-tree 懒加载

2021年05月25日约 282 字预计阅读 1 分钟次阅读

除了顶级节点自定义为：全国，其他子节点懒加载,在点击节点时才进行该层数据的获取。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
<el-tree
  :data="treeData"
  :node-key="code"
  :load="loadChildren"
  lazy
  highlight-current
  :props="props"
  accordion
  @node-click="handleNodeClick"
  ref="treeDataRef">
</el-tree>
</template>

<script>
  export default {
    data() {
      return {
       treeData:[],
       code:000,
       props:{
           label:'code',
           children:'children',
           isLeaf:'leaf'
       }
        }
      };
    },
    methods: {
      handleNodeClick(treeData) {
        console.log(treeData.code);
      },
      loadChildren(node,resolve){
          console.log(node.data)
          try{
              if(node.level===0){
                  return resolve([{ code: '全国' }])//自定义一个顶级的全国节点
              }else if(node.level===1){//获取自定义节点下的数据
                const treeData = await queryCodeList({pcode:'111111'})
                resolve(treeData)
              }else{
                const treeData=await queryCodeList({pcode:node.data.code})//此时的code是当前节点node中的data的code
                resolve (treeData)
              }
          }catch(e){
            console.warn(e)
          }
      }
    }
  };
</script>

目录

el-tree 懒加载