vue+element下拉列表级联操作， 层级自己定

<template>
  <div>
    测试动态级联
    <el-cascader :props="props" ref="cascader"></el-cascader>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad: this.lazyLoadData
      },
      arr: []
    }

  },
  methods: {
    lazyLoadData(node, resolve) {
      let { level } = node;
      // console.log(level)
      let nodes = []

      setTimeout(() => {
        if (level === 0) {
          nodes = this.getDataSourceById();
          level++;
        } else if (level === 1) {
          console.log(node)
          this.arr.push(node.value)
          nodes = this.getDataSourceById2(1, 0) // 参数模拟后台接口
          level++
        } else if (level === 2) {
          this.arr.push(node.value)
          nodes = this.getDataSourceById3(1, 0) // 参数模拟后台接口

        }
        this.data = this.$refs['cascader'].getCheckedNodes()
        // console.log(this.arr)
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes);
      }, 1000);
    },
    getDataSourceById() {
      let arr = [{
          value: '测试1',
          label: '测试1'
        },
        {
          value: '测试2',
          label: '测试2'
        }
      ]
      return arr
    },
    getDataSourceById2(id, level) {
      let arr = [{
          value: '测试3',
          label: '测试3'
        },
        {
          value: '测试4',
          label: '测试4'
        }
      ]
      return arr
    },
    getDataSourceById3(id, level) {
      let arr = [{
          value: '测试5',
          label: '测试5',
          leaf: true
        },
        {
          value: '测试6',
          label: '测试6',
          leaf: true
        }
      ]
      return arr
    }
  }
}

</script>