element ui Tree树形控件

1. lazy 是否懒加载子节点，需与 load 方法结合使用 boolean 默认为false
2. load 加载子树数据的方法，仅当 lazy 属性为true 时生效 function(node, resolve)
3. 使用懒加载load不需要再使用data，利用resolve返回值即可
4. 注意：第一层的数据要写在node.level == 0

HTML部分

 <el-tree
      show-checkbox
      node-key="id"
      lazy  //必须
      :load="loadNode" //必须
      :default-expand-all ="false"
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
1
2
3
4
5
6
7
8
9

js部分

data(){
  return{
    props: {
        label: "name",   //显示在页面上的值的属性名
        children: "zones", //表示该组件的子节点数据存储在"zones"属性中
        isLeaf: "leaf",//表示该组件的叶子节点数据存储在"leaf"属性中
      }
}
},
computed:{
 advertList(){
  return this.$store.state.advert.advertList
 }
 methods:{  
 // 此处只举例了两层
       loadNode(node, resolve) {
       //第一层
    if (node.level === 0) {
       this.getAdveData(resolve);
    }
    //第二层
    if (node.level  ==  1) {
      this.getchildData(node,resolve);
    }
    //其余返回空 ，一定要加这个判断，否则会一直执行懒加载函数
    else{
      return resolve([])
    }
},
//第一层的逻辑
      async getAdveData(resolve){
        try {
        await this.$store.dispatch('advert/getAdvert')
          return resolve( this.advertList);
        } catch (error) {
          console.warn(error);
        }
      },
 //第二层的逻辑
     async  getchildData(node,resolve){
        try {
          let params = {id:node.data.pid}
        await this.$store.dispatch('advert/getAdvert',params)
          return resolve( this.advertList);
        } catch (error) {
          console.warn(error);
        }
      }
 }
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