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
}