el-cascader动态懒加载子项

本菜鸡真的是遇到的时候蒙了,后端说,给我一个接口,然后拿到父级id的时候再调接口把id穿进去再查子级,我当时是懵的,这咋玩…
然后,同事说可以用懒加载,恍然大悟…
效果如下

代码如下,

  <el-form-item label="评价项" prop="name">
            <el-cascader
               ref="treeList"
              v-model="creditAddForm.name" 
              :props="cascaderProps"
              :show-all-levels="false"
              @change="handelChangeNameList"
              ref="cascader"
            />
      </el-form-item>

 computed: {
    cascaderProps() {
      return {
        value: "id",
        checkStrictly: true,
        emitPath: false,
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    },
    }
  },

// 在methods里面
 // 评价项懒加载
    lazyLoad(node, resolve) {
      const { value } = node
      /* 获取企业评价项 */
      this.$services["credit/common-json"]
        .getTypeTree({
          applyTo: "10900002",
          id: value || undefined,
          page: 1,
          pageSize: 99999
        })
        .then(res => {
          const nodes = res.map(item => ({
            ...item,
            label: item.name,
            value: item.id,
            leaf: item.bottom
          }))
          resolve(nodes)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handelChangeNameList(){
    const checkedNodes = this.$refs['treeList'].getCheckedNodes()
     console.log(checkedNodes) // 获取当前点击的节点
    console.log(checkedNodes[0].data.label) // 获取当前点击的节点的label
    console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
}