vue3全国省市区选择并处理回显问题,前后端代码,包括省市区sql文件

废话不多说,直接上图开干
在这里插入图片描述

步骤-1:前端vue3代码

前后端代码都要可以往后看,只看前端,在步骤1就可以了。

<template>
  <div style="padding: 100px;">
    <el-cascader size="default" v-model="areaData" :props="areasProps" @change="cascaderHandleChange" />
  </div>
</template>
<script lang="ts" setup>
// 获取省市区接口
import { getAreas } from "@/api/sys-area"
import { SchedulingSupplerForm } from "@/api/scheduling/suppler/types"

const state = reactive({
  schedulingSupplerForm: {
    provinceId:0,
    cityId:0,
    countyId:0
  } as SchedulingSupplerForm,
  // 设置默认值,模拟省市区回显
    areaData: [440000000000,440300000000,440303000000] as number[] 
})
const {
  schedulingSupplerForm,
  areaData
} = toRefs(state)

/**
 * 动态加载省市区
 */
const areasProps: CascaderProps = {
  lazy:true,
  lazyLoad(node,resoleve){
    const { value } = node
    getAreas(value).then(res=>{
      let nodes:any[] = [];
      res.data.forEach((item:any)=>{
        nodes.push({
          value: item.areaId,
          label: item.areaName,
          leaf: item.level >= 3
        })
      })
      resoleve(nodes)
    })
  }
}

/**
 * 省市区选择的时候同步省市区的值
 * @param value 
 */
 function cascaderHandleChange(value:any){
  state.areaData = value;
  if(state.areaData.length > 0){
    state.schedulingSupplerForm.provinceId = state.areaData[0];
    state.schedulingSupplerForm.cityId = state.areaData[1];
    state.schedulingSupplerForm.countyId = state.areaData[2];
  }else{
    state.schedulingSupplerForm.provinceId = undefined;
    state.schedulingSupplerForm.cityId = undefined;
    state.schedulingSupplerForm.countyId = undefined;
  }
}
</script>

步骤-2:后端Java代码

实体

@Data
@TableName("sys_area")
public class SysArea {
	@TableId
	private Long areaId;

	private String areaName;

	private Long parentId;

	private Integer level;

}

XML

<select id="getAreas" resultType="com.youlai.system.model.entity.SysArea">
    select * from sys_area where
    <if test="parentId!=null and parentId!='' ">
        parent_id = #{parentId}
    </if>
    <if test="parentId==null or parentId=='' ">
        level = 1
    </if>
</select>

Mapper

List<SysArea> getAreas(@Param("parentId") Long parentId);

省略了service代码,直接上控制层代码
Controller

@GetMapping("/getAreas")
@Operation(summary = "获取全国省市区表列表",security = {@SecurityRequirement(name = "Authorization")})
public Result<List<SysArea>> getAreas(Long parentId){
    return Result.success(sysAreaService.getAreas(parentId));
}

步骤-3:mysql数据表创建


CREATE TABLE `sys_area` (
 `area_id` bigint NOT NULL AUTO_INCREMENT,
 `area_name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
 `parent_id` bigint DEFAULT NULL,
 `level` int DEFAULT NULL,
 PRIMARY KEY (`area_id`) USING BTREE,
 KEY `parent_id` (`parent_id`) USING BTREE COMMENT '上级id'
) ENGINE=InnoDB AUTO_INCREMENT=659006000001 DEFAULT CHARSET=utf8mb3 ROW_FORMAT=DYNAMIC COMMENT='全国省市区表';

步骤-4:mysql省市区数据表文件

点这里下载:
省市区sql文件下载

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值