el-cascader级联懒加载发送请求获取下级数据

189 阅读1分钟

html部分

<el-cascader v-model="examId" :props="cascaderProps"></el-cascader>

data里的数据

// 考试懒加载
cascaderProps: {
  lazy: true,
  lazyLoad: async (node, resolve) => {  
    const { level } = node
    if (level === 0) {
      let gradeArr = await this.cascaderOptions()
      gradeArr = gradeArr.map(item => {
        return {
          ...item,
          leaf: level >= 1 // 必须要写,不写无法点击进到下一级
        }
      })
      resolve(gradeArr)
    } else if (level === 1) {
       // 通过点击上一级的数据调接口获取下一级的数据,类似tree
      let res = await getCombineExamToList({
        schoolId: this.schoolId,
        fromExamId: this.examId,
        gradeType: node.value
      })
      if (res.data && res.data.examList) {
        this.targetExamList = res.data.examList
        let nodes = Array.from(res.data.examList).map(item => {
          return {
            value: item.examId,
            label: item.examName,
            leaf: level >= 1
          }
        })
        resolve(nodes)
      }
    }
  }
}

methods

cascaderOptions () {
  return gradeArr // 返回字段得是label、value
}