vue ElementUI cascade selector echo problem solved

1. Analyze the problem

【Problem Description】Use the Cascader cascade selector component of ElementUI, if lazy and dynamic loading of data are used, it will cause it tov-modelAfter the data in the data is re-placed in the Cascade cascade, the data will not be echoed. 【Cause Analysis】 Although in the cascading componentv-modelThe selected data is re-passed in, but the option data is constructed by lazy loading + remote data. At this time, the structure data of the cascading component is not generated.There are only selected data but no option data, thus leading to the cascading selector having no data for display, which leads to the problem of data not echoing. [Solution] ① The front-end renders complete option data. This solution requires a large amount of data rendered by the front-end, which may cause the page to crash. This method is not recommended to be processed; ② Only the selected data is rendered, that is, only the selected option structure is built. After processing the data structure returned by the back-end, it can still be used to cooperate with the lazy load + remote data (the data generated by the rendering needs to be deduplicated to avoid duplication with remote access data)

2. Solve the problem

With the help of Cascader Cascade Selector ComponentoptionsProperties, build option structure cooperationv-modelData echo can be realized. If you want to cooperate with lazy loading + remote data, you need to specify the attribute information of the cascading component.

{
  "label": "Zhejiang Province",
  "value": 12321
  "children": [{
      "label": "Hangzhou City",
      "value": 4565
   }]
}

【Implementation method】

<el-cascader
  v-model='data'
  :props='cascadeProps'
  :options='cascadeOptions'
  filterable
  ></el-cascader>

cascadeProps: {
  multiple: true,
    checkStrictly: true,
      // Enable lazy loading      lazy: true,
        // Remote data access        lazyLoad: async (node, resolve) => {
          const { data, level} = node
          const parentCode = level === 0 ? '000' : 
          const nodes = await (parentCode, level)
          // Remove duplicate nodes          let nodeFilter = (n => {
            if (!()) {
              return n
            }
          })
          resolve(nodeFilter)
        },
},

getRemoteData(parentCode, level) {
  return new Promise((resolve, reject) => {
    getDistrictData({ parentCode }).then((res) => {
      resolve((, level))
    })
  })
},

  formatData(data, level) {
    let districtType = ''
    switch (level) {
      case 0:
        districtType = 'province'
        break
      case 1:
        districtType = 'city'
        break
      case 2:
        districtType = 'district'
        break
      default:
        break
    }
    return ((item) => {
      return {
        districtType,
        nodeCode: ,
        value: ,
        label: ,
        leaf: level >= 2,
      }
    })
  },

This is the article about solving the ElementUI cascade selector echo problem. For more related ElementUI selector content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!