elementuicascader级联选择器动态加载以及回显

在⽤实际开发时使⽤遇到通过点击⼀级的下拉选项去动态获取⼆级下拉选项.以此记录:使⽤:

定义变量以及设置:

data() { return {

doctorValue:[] props: {

//checkStrictly: true,// ⽗⼦节点是否互相关联,其余配置见官⽹ lazy: true,

lazyLoad: this.lazyLoad } }; },

点击动态加载:

lazyLoad(node, resolve) { setTimeout(() => {

this.getHospital(node, resolve) }, 50) },

getHospital(node, resolve) { // 第⼀级

　　　　　// this.hospitalData 是提前接⼝获取的⼀级下拉框

if (node.level == 0) {

const nodess =this.hospitalData.map((i, index) => ({ value: i.id,

label: i.hospitalName, }))

resolve(nodess); }

// 第⼆级

if (node.level == 1) { let data = {

hospitalId: node.data.value, sortType: \"default\" };

getDoctorsByHospital(data).then(res => { // console.log(res)

const nodes = res.data.map((item, index) => ({ value: item.id,

label: item.doctorName, leaf: node.level >= 1

　　　　　　　　　// 节点数,我的只有⼆级,设置之后点击⼆级不再出现加载圈 }));

resolve(nodes); }) } },

第⼆次进来以后,并不能正确回显,查询资料后,在会显⽰时,重新渲染级联选择器的⽅法最简单

this.doctorValue = [res.data.hospitalId, res.data.doctorId]this.showSelect = falsesetTimeout(() => {

this.showSelect = true }, 50)