Lazy loading

Lazy loading can be seen in elementUi, and the lazy and lazyLoad attributes can be enabled

The echo

Echo is generally details page or dialog page, data returned is the background, and as a result of our caseader is lazy loading, is the region to the next level is the user manual click out, the key is the need to back to appear the background return full path id, front end, according to the path id have to order, in turn, the request to the background, to get the return data, Assemble the data required by caseader

The key point

  • Background to return to the full pathallLevelCode
  • Front-end requests in sequence
  • The assembly data
  • Caseader will look at the bound dataareaCdApply colours to a drawing

I’m going to tell you about the whole path of the graph above, and I’m going to write a pseudocode

{label: xx, value: 1, // path id children: If path id = 1, insert request data with path ID = 1:2]}Copy the code

The complete code

  • recursive
  • Shift full path retrieves the first digit and requests the data RES
  • Which of the children will the res go to
  • Return to arr
@param allLevelCode allLevelCode for all levels * @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 }Copy the code