526互联

elementplus-Cascader 组件vue3 实现省市区级联动态加载

发布时间 2023-08-26 22:42:27作者: iwen1992

背景：

省市区级联是三张sql表，需要实现动态加载

因为我只需要三级
leaf 标记为>=2就好了
 <el-cascader :props="props" />
 
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const level = node.level
      const parentId = node.value
      let options;
      if(level==0){
        let data = await getProvince()
        options = data.map(item => ({
          value: item.provinceId,
          label: item.provinceName,
          leaf: level >= 2,
        }))
        
      }else if(level==1){
        let data = await getCity({
            provinceId:parentId
        })
        options = data.map(item => ({
          value: item.cityId,
          label: item.cityName,
          leaf: level >= 2,
        }))
      }else if(level == 2){
        let data = await getDistrict({
            cityId:parentId
        })
        options = data.map(item => ({
          value: item.districtId,
          label: item.districtName,
          leaf: level >= 2,
        }))
      }
      resolve(options)
  }
}