整体思路是数据传回时,根据父id判断是否需要加载对应的数据,最后更新dom
首先是el-cascader 配置
<el-cascader
v-model="userList"
:key="testKey"
size="small"
:show-all-levels="false"
:props="props"
:options="options"
collapse-tags
></el-cascader>
props: {
lazy: true,
lazyLoad (node, resolve) {
//在对应级别加载动态数据
if (level === 2) {
resolve();
}
}
}
初始加载options数据
created() {
//获取最初静态options
options= [...]
},
获取回显数据
const s = new Set();
res.data.forEach(i=>{
//获取需要加载数据的id
s.add(i.id)
//如果需要处理返回数据的格式,在这处理
})
//在options对应级别判断是否需要加载
for (const i of options.children) {
if(s.has(i.id)){
//调接口加载数据
i.children = 动态数据
}
}
//全部处理完,修改key重新渲染
this.testKey++