Vue el-tree 树形控件 懒加载props及node-click使用实例

el-tree可以配合el-container布局使用，如果有需要还可以搭配v-if，这里只简单记录el-tree。
建议参考第二段代码。

结果：

代码1.0：

<template>
  <div>
    <el-tree
      :props="props"
      :load="loadNode"
      :data="signalList"
      @node-click="clickNode"
      lazy>
    </el-tree>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        signalList: [{src_name: 'test1'}, {src_name: 'test2'}, {src_name: 'test3'}, {src_name: 'test4'}],
        props: {
          label: (data, node) => {
            if (node.level === 1) {
              // 第一层lable为src_name字段
              return data.src_name
            } else if (node.level === 2 || node.level === 3) {
              // 第二三层lable为name字段
              return data.name
            }
          },
          isLeaf: (data, node) => {
            if (node.level === 3) {
              // 第三层没有子节点
              return true
            }
          }
        },
        currLevel: '',
        currSignal: {},
        currChannel: {}
      }
    },
    methods: {
      loadNode (node, resolve) {
        if (node.level === 0) {
          return resolve(this.signalList)
        } else if (node.level === 1) {
          // 可以换成自定义的方法，ajax请求之类的，node.data是所选节点的对象信息
          console.log(node.data)
          return resolve([{name: '2'}, {name: '2'}])
        } else if (node.level === 2) {
          return resolve([{name: '3'}, {name: '3'}])
        } else if (node.level > 2) {
          return resolve([])
        }
      },
      clickNode (data, node, obj) {	
      //点击节点触发,不同层级的level事件不同
      //可对应界面变化，比如通过v-if控制模块显隐
        if (node.level === 1) {
          this.currLevel = 1
          this.currSignal = node.data
        } else if (node.level === 2) {
          this.currLevel = 2
          this.currChannel = node.data
        } else if (node.level === 3) {
			console.log(node.level)
		}
      }
    }
  }
</script>

代码2.0：

<template>
  <div>
    <el-tree
      :props="props"
      :load="loadNode"
      :data="signalList"
      @node-click="clickNode"
      lazy>
    </el-tree>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        signalList: [],
        props: {
          label: (data, node) => {
            if (node.level === 1) {
              // 第一层lable为src_name字段
              return data.src_name
            } else if (node.level === 2 || node.level === 3) {
              // 第二三层lable为name字段
              return data.name
            }
          },
          isLeaf: (data, node) => {
            if (node.level === 3) {
              // 第三层没有下一级节点
              return true
            }
          }
        },
        currLevel: '',
        currSignal: {},
        currChannel: {}
      }
    },
    created () {
      // 创建时初始化signalList的值，也可以是一个方法
      // 或者在某事件触发时改变signalList的值，树会随之改变
      this.getSignalList()
    },
    methods: {
      getSignalList () {
        // 模拟一个获取level = 1 层级的方法，实际应用中都是后台请求获取
        this.signalList = [{src_name: 'test1'}, {src_name: 'test2'}, {src_name: 'test3'}, {src_name: 'test4'}]
      },
      loadNode (node, resolve) {
        // 调用方法
        return resolve(this.getLevel(node))
      },
      getLevel (node) {
        // 可以根据需要多拆分几个方法
        // 可以请求后台数据，node.data中应该会有你想要的参数
        if (node.level === 0) {
          return this.signalList
        } else if (node.level === 1) {
          console.log(node.data)
          return [{name: '2'}, {name: '2'}]
        } else if (node.level === 2) {
          return [{name: '3'}, {name: '3'}]
        } else if (node.level > 2) {
          return []
        }
      },
      clickNode (data, node, obj) {	
      //点击节点触发,不同层级的level事件不同
      //可对应界面变化，比如通过v-if控制模块显隐
        if (node.level === 1) {
          this.currLevel = 1
          this.currSignal = node.data
        } else if (node.level === 2) {
          this.currLevel = 2
          this.currChannel = node.data
        } else if (node.level === 3) {
			console.log(node.level)
		}
      }
    }
  }
</script>