spring boot +vue 实现三级联动

最新推荐文章于 2024-06-24 11:26:29 发布

瘟神不会编程

最新推荐文章于 2024-06-24 11:26:29 发布

阅读量2.9k

点赞数 7

本文链接：https://blog.csdn.net/Ronin_He/article/details/103042373

版权

这篇博客介绍了如何使用Vue.js和Spring Boot构建一个三级联动下拉框。首先展示了Vue的前端效果，然后详细讲解了Spring Boot后端的实现过程，包括pojo层、dao层、service层和controller层的代码编写，最后提到了相关的SQL查询。

摘要由CSDN通过智能技术生成

spring boot +vue 实现省、市、区三级联动

基于vue三级联动下拉框

<template>
  <div id='addAddress'>
    <div class="content">
        <span class="title">省</span>
        <select v-model="selectedProvince" @change='getCity(selectedProvince)'>
          <option value="0">-- 请选择 --</option>
          <option :value="province" v-for='(province,index) in regin' :key='index'>{
  {province.name}}</option>
        </select>
        <span class="title">市</span>
        <select v-model="selectedCity" @change='getCountry(selectedCity)'>
          <option value="0">-- 请选择 --</option>
          <option :value="city" v-for='(city,index) in cityList' :key='index'>{
  {city.name}}</option>
        </select>
        <span class="title">县</span>
        <select v-model="selectedCountry" @change='getChild(selectedCountry)'>
          <option value="0">-- 请选择 --</option>
          <option :value="country" v-for='(country,index) in countryList' :key='index'>{
  {country.name}}</option>
        </select>
      </div>
    <div class="border"></div>
  </div>
</template>
<script>
  const axios = require('axios')
  export default{
    
    name:'addAddress',
    data(){
    
      return{
    
        value:true,  //是否设置为默认
        regin:[{
    
          base_areaid:1,
          name: '北京市',
          nodes: [{
    
            base_areaid: 7180682,
            name: '北京市',
            nodes:[{