el-cascader 请求后端接口加载数据案例

最新推荐文章于 2025-03-21 13:46:23 发布

原创最新推荐文章于 2025-03-21 13:46:23 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #vscode

模板

<el-cascader
  v-loading="loading"
  clearable
  style="width: 200px"
  v-model="scope.row.address"
  :props="lazyAddress"
  placeholder="请选择省市区"
></el-cascader>

data数据

lazyAddress: {
 value: 'value',
 label: 'label',
 lazy: true, // 开启懒加载
 // checkStrictly: true, //可选择任意节点
 lazyLoad(node, resolve) {
   //node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
   setTimeout(() => {
     const nodes = []
     // 构造查询条件
     if (node.level >= 4) {
       // 当达到第四级时，不再加载子节点
       resolve([])
     } else {
       let code = node?.data?.value ? node?.data?.value : ''
       let type = node.level + 1
       //查询接口
       setTimeout(() => {
         that.loading = true
         that.$store.dispatch('intelligentRetreatWarehouse/constantGetAddressDetail', { type: type, code: code }).then((res) => {
           res.data.map((item) => {
             let obj = {
               value: item.code,
               label: item.name,
               leaf: node.level >= 3
               //leaf: item.hasChildren // 节点级别，如果没有子节点就停止查询
             }
             
             nodes.push(obj)
           })
           //重新加载节点
           resolve(nodes)
           that.loading = false
           
           
         })
       }, 0)
     }
   }, 100)
   
 }
 
}