element el-cascader动态加载数据 （省市区三级联动）

选择效果图

选择完毕效果图

前端代码

• v-model：选择保存的值
• :props：配置项
• clearable：可清除

 <el-form-item label="省市区" prop="addrIdPath">
   <el-cascader
      style="width: 340px;"
      v-model="form.addrIdPath"
      :props="address"
      clearable
      >
    </el-cascader>
  </el-form-item>

data中数据配置，对应上方props

 // 省市区
  address: {
     lazy: true, // 开启懒加载
     checkStrictly: true, //可选择任意节点
     lazyLoad (node, resolve) { //node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
       setTimeout(() => {
         const nodes = []; 
         // 构造查询条件
         let query = {
           id: node.level == 0 ? 0:node.value,
           level:node.level + 1
         }
         //查询接口
         getTree(query).then(res=>{
           res.data.map((item)=>{
             let obj = {
               value: item.value,
               label: item.label,
               //leaf: item.hasChildren // 节点级别，如果没有子节点就停止查询
             }
             nodes.push(obj);
           })
           //重新加载节点
           resolve(nodes);
         })
       }, 500);
     }
   }

组件数据回填

• 配置 options 属性
• options 中存放数据
• this.$refs.cascader.panel.initStore() 初始化组件

 <el-form-item label="省市区" prop="addrIdPath">
   <el-cascader
      style="width: 340px;"
      v-model="form.addrIdPath"
      :props="address"
      :options="options"
      clearable
      >
    </el-cascader>
  </el-form-item>

后端代码

controller

@RestController
@RequestMapping("/region")
public class RegionController extends BaseController {

    @Resource
    private RegionService regionService;

    /**
     * 查询区域信息树
     */
    @GetMapping("/tree")
    public AjaxResult getTree(Region region) {
        List<RegionTree> tree = regionService.getTree(region);
        return success(tree);
    }
}

service

@Service
public class RegionServiceImpl implements RegionService {

    @Resource
    private RegionMapper regionMapper;


    /**
     * 查询区域信息树
     * @return List<RegionTree>
     */
    @Override
    public List<RegionTree> getTree(Region region) {
        List<RegionTree> tree = regionMapper.getTreeList(region);
        return tree;
    }
}

mapper

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.region.mapper.RegionMapper">

    <resultMap type="RegionTree" id="RegionTreeResult">
        <result property="value"    column="id"    />
        <result property="label"    column="name"    />
    </resultMap>

    <select id="getTreeList" parameterType="Region" resultMap="RegionTreeResult">
        select id,name from am_region
        <where>
            parent_id = #{id} and level = #{level}
        </where>
    </select>
</mapper>