elementui caseader 懒加载+回显

懒加载

懒加载看elementui官网就好，开启lazy 和 lazyLoad 属性即可，这里主要讲回显

回显

回显一般都是详情页或者dialog页面，数据是后台返回的，由于我们的caseader是懒加载得，也就是地区得下一级是用户手动点击出来的，那回显得关键就是需要后台返回完整得路径id，前端根据路径id得顺序，依次向后台请求，拿到返回数据，组装成caseader需要的数据

关键点

• 后台返回完整得路径 allLevelCode
• 前端依次请求
• 组装数据
• caseader 会根据绑定得数据areaCd渲染

组装数据这里要说一下，以上图得完整路径为例，我写个伪代码

取出完整路径得第一个数据，发送请求，再取出第二个数据，发送请求，并塞到第一个返回数据的children里面去，依次下去
{
    label: xx,
    value: 1, // 路径id
    children: [
        匹配到路径id是1的，将路径id为 1：2得请求数据塞进去
    ]
}

完整代码

• 递归
• shift完整路径取出第一位，请求数据res
• for of判断res要塞到哪一个children里面去
• 返回arr

/**
 * 详情页回显
 * @param allLevelCode 所有层级的地区编码
 * @return []
 */
export async function initLoadArea (allLevelCode) {
  if (!allLevelCode || allLevelCode.length === 0) return []
  let arr = []
  const val = allLevelCode.shift()
  const res = await getAreaSelectInfo(val)
  for (const item of res) {
    const obj = {
      label: item.nm,
      value: item.wCd,
      children: item.wCd === allLevelCode[0] ? await initLoadArea(allLevelCode) : []
    }
    arr.push(obj)
  }
  return arr
}