uni-app使用uni-data-picker插件实现省市区弹窗，附后台mybatis-plus简单实现方式

uni-data-picker实现省市区三级联动

<uni-list-item showArrow>
		<template v-slot:body>
			<text class="detail-text">选择地区</text>
			<uni-data-picker :localdata="region" data-pcode="this.pcode" placeholder="请选择地区" popup-title="请选择地区" @nodeclick="regiononnodeclick"></uni-data-picker>
	  </template>
</uni-list-item>

<script>
	export default {
		data() {
			return {
				pcode: 0,
				single: '',
				region: []
			}
		},
		onLoad() {
			this.getInfoList();
		},
		methods: {
			onchange(e) {
				this.single = e
				console.log(e)
			}, //查询省市区，后台返回数据
			getInfoList() {}
		},
		components: {
			tabbar
		}
	}
</script>

<style lang="less">
	.detail-text {
		display: flex;
		align-items: center;
		width: 150rpx;
		
	}

	.uni-list {
		& input {
			width: 80%;
		}
	}

	.upload-imgs {
		padding: 15rpx;
	}

	button {
		width: 500rpx;
		margin-top: 50rpx;
		border-radius: 3rpx;
	}

	.uni-goods-nav {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
</style>

//实体类
@TableName("sys_regioncode")
public class SysRegioncodeEntity implements Serializable {
	private static final long serialVersionUID = 1L;

	/**
	 * 行政区化编码
	 */
	private String regioncode;
	/**
	 * 行政区化名称
	 */
	private String regionname;
	/**
	 * 上级行政区化编码
	 */
	private String pcode;
	/**
	 * 删除标志（0代表存在 2代表删除）
	 */
	private String delFlag;


	/**
	 * 
	 */
	@TableId
	private Integer id;

	@TableField(exist = false)
	private List<SysRegioncodeEntity> children = new ArrayList<SysRegioncodeEntity>();

	/**
	 * 设置：行政区化编码
	 */
	public void setRegioncode(String regioncode) {
		this.regioncode = regioncode;
	}
	/**
	 * 获取：行政区化编码
	 */
	public String getRegioncode() {
		return regioncode;
	}
	/**
	 * 设置：行政区化名称
	 */
	public void setRegionname(String regionname) {
		this.regionname = regionname;
	}
	/**
	 * 获取：行政区化名称
	 */
	public String getRegionname() {
		return regionname;
	}
	/**
	 * 设置：上级行政区化编码
	 */
	public void setPcode(String pcode) {
		this.pcode = pcode;
	}
	/**
	 * 获取：上级行政区化编码
	 */
	public String getPcode() {
		return pcode;
	}
	/**
	 * 设置：删除标志（0代表存在 2代表删除）
	 */
	public void setDelFlag(String delFlag) {
		this.delFlag = delFlag;
	}
	/**
	 * 获取：删除标志（0代表存在 2代表删除）
	 */
	public String getDelFlag() {
		return delFlag;
	}
	/**
	 * 设置：
	 */
	public void setId(Integer id) {
		this.id = id;
	}
	/**
	 * 获取：
	 */
	public Integer getId() {
		return id;
	}

	public List<SysRegioncodeEntity> getChildren() {
		return children;
	}

	public void setChildren(List<SysRegioncodeEntity> children) {
		this.children = children;
	}
//uni-data-picker返回格式必须是text-value格式，定义此类返回
public class RegionVo {
    private String text;
    private String value;

    private List<RegionVo> children = new ArrayList<>();

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public List<RegionVo> getChildren() {
        return children;
    }

    public void setChildren(List<RegionVo> children) {
        this.children = children;
    }
}
//
    @PostMapping(value = "/getArea")
    private AjaxResult getArea() {
        //查询出全部
        List<SysRegioncodeEntity> list = new ArrayList<SysRegioncodeEntity>();
        try {
            list = sysRegioncodeService.getAreas();
        } catch (Exception e) {
            e.printStackTrace();
        }
        //根据层级关系循环设置需要返回的格式
        List<RegionVo> rootList = new ArrayList<>();
        for(SysRegioncodeEntity entity : list){
            if(entity.getPcode().equals("0")){
                RegionVo vo = new RegionVo();
                vo.setText(entity.getRegionname());
                vo.setValue(entity.getRegioncode());
                rootList.add(vo);
            }
        }

        for(RegionVo entity : rootList){
            List<RegionVo> cityList = new ArrayList<>();
            for(SysRegioncodeEntity cityEntity : list){
                // 获取市的编码
                if(cityEntity.getPcode().equals(entity.getValue())){
                    RegionVo vo = new RegionVo();
                    vo.setText(cityEntity.getRegionname());
                    vo.setValue(cityEntity.getRegioncode());

                    // 区
                    List<RegionVo> qxList = new ArrayList<>();
                    for(SysRegioncodeEntity qxEntity : list){
                        if(qxEntity.getPcode().equals(vo.getValue())){
                            RegionVo qxVO = new RegionVo();
                            qxVO.setText(qxEntity.getRegionname());
                            qxVO.setValue(qxEntity.getRegioncode());
                            qxList.add(qxVO);
                        }
                    }
                    vo.setChildren(qxList);
                    cityList.add(vo);
                }
            }
            entity.setChildren(cityList);
        }

        return AjaxResult.success(rootList);
    }
//Service层
public interface SysRegioncodeService extends IService<SysRegioncodeEntity> {
    /**
     * 根据上级行政区化编码查询省市区
     */

    List<SysRegioncodeEntity> getAreas();
}

//实现层
 @Autowired
    private SysRegioncodeMapper sysRegioncodeMapper;

    @Override
    public List<SysRegioncodeEntity> getAreas() {
    //查询全部
        return sysRegioncodeMapper.selectList(null);
    }

这是最简单的实现方式，还有其它方法改进，这种不是很可取，简单的就是这样写，小白初次使用，有问题欢迎指出