使用若依框架实现省市区,级联选择下拉框

使用若依框架实现省市区,级联选择下拉框需要注意的问题,与解答且还实现各个功能还是蛮简单的:实现思路:1.根据parent_id= 0 查询 省2.根据上面一个下拉框-省的id ->作为parent_id 查询市(需要解决如何动态的显示这个下拉框)3.根据市的id ->作为parnet_id 查询区根据省的id值,动态的显示市的name,这就需要前端发送一个请求(附带省的id值)给后端controller,congtroller根据regionId查询数据,并将数据返回给
摘要由CSDN通过智能技术生成
使用若依框架实现省市区,级联选择下拉框
需要注意的问题,与解答

且还实现各个功能还是蛮简单的:
实现思路:
1.根据parent_id= 0 查询 省
2.根据上面一个下拉框-省的id ->作为parent_id 查询市(需要解决如何动态的显示这个下拉框)
3.根据市的id ->作为parnet_id 查询区

根据省的id值,动态的显示市的name,这就需要
前端发送一个请求(附带省的id值)给后端controller,congtroller根据regionId查询数据,并将数据返回给前端。

这种这个过程需要解决四个问题,①前端如何发送请求,给后端;②后端如何接收前端发来的数据;
③后端如何将数据发送给前端;④前端又如何解析后端发送过来的数据。

对于①,②问题的解答:
前端使用ajax异步请求,使用请求连接到后端Controller的方法,并将参数传递过去,(以json的数据类型)
当然对于查询的请求,使用GetMapping映射就可以了

对于③,④问题的解答:
后端controller中的方法前要加上映射路径,要去前端URL相同,
还要加上@ResponseBody,将返回的数据,以json的数据类型发送给前端。

数据库表

前端写法
 <!-- 写下拉框-->
 <div class="form-group">
            <label class="col-sm-3 control-label">所在区域:</label>
            <div class="col-sm-8">
                <select id="province" class="form-control m-b" th:with="type=${@region.selectSysRegionNameByParentId(0)}">
                    <option>请选择省份</option>
                    <option th:each="t : ${type}" th:text="${t.name}" th:value="${t.id}"></option>
                </select>
            <
  • 1
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,以下是一个简单的若依框架使用 Vue Cascader 的代码示例。假设您已经安装了 Vue 和 Vue Cascader,代码如下: 在 Vue 组件中引入 Cascader 组件: ``` <template> <div> <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" :props="{ expandTrigger: 'hover' }" placeholder="请选择" ></el-cascader> </div> </template> <script> import { Cascader } from 'element-ui'; export default { components: { 'el-cascader': Cascader, }, data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致', }, { value: 'fankui', label: '反馈', }, { value: 'xiaolv', label: '效率', }, { value: 'kekong', label: '可控', }, ], }, { value: 'daohang', label: '导航', children: [ { value: 'cexiangdaohang', label: '侧向导航', }, { value: 'dingbudaohang', label: '顶部导航', }, ], }, ], }, ], selectedOptions: [], }; }, methods: { handleChange(value) { console.log(value); }, }, }; </script> ``` 在这个示例中,我们使用了 Element UI 的 Cascader 组件,并传入了一个 options 数组作为级联选择器的数据源。selectedOptions 用于双向绑定当前选中的选项。@change 监听选项变化事件,handleChange 方法会在选项变化时触发,并打印出选中的选项的值。 注意,这里我们使用了 :props="{ expandTrigger: 'hover' }" 来设置展开子菜单的触发方式为鼠标悬停。您可以根据自己的需求调整这个属性。 希望这个示例能够帮到您。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值