SpringBoot+vue实现省市区的三级联动

最新推荐文章于 2025-06-28 10:41:42 发布

~空梦

最新推荐文章于 2025-06-28 10:41:42 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript spring boot

本文链接：https://blog.csdn.net/shshhshshh/article/details/128000682

最终效果如下：

1.新建一个springboot项目引入mybatis-plus 并且使用脚手架搭建一个Vue项目,在Vue项目中引入ElementUI以及Axios,在mysql创建相关数据库

三级联动的关键在于每一级的变动都会对一下的子级产生影响，一旦当前级的内容更改，下一级的内容要立刻随之更改；

前端页面主要代码如下

<template>
  <div id="app">
    省份：
    <select @click="allLoad()" v-model="code">
      <option value="">请选择省份</option>
      <option v-for="p of t_address_province" :key="p.id" :value="p.code">{
  
  {p.name}}</option>
    </select>
    城市：
    <select @click="allCity()" v-model="provincecode">
      <option value="">请选择市</option>
      <option v-for="c of t_address_city" :key="c.id" :value="c.code">{
  
  {c.name}}</option>
    </select>
    县区：
    <select @click="allTown()">
      <option value="">请选择县/区</option>
      <option v-for="t of t_address_town" :key="t.id" :value="t.citycode">{
  
  {t.name}}</option>
    </select>

    <div>
      <table>
        <tr>
          <th><input type="hidden" v-model="province.id"></th>
        </tr>
        <tr>
          <th>省份编码：<input v-model="province.code" type="text" name="code"></th>
        </tr>
        <tr>
          <th>省份名称：<input v-model="province.name" type="text" name="name"></th>
        </tr>
        <input type="submit" @click="dialogAdd()" value="保存">
      </table>
    </div>

    <div>
      <table border="1px">
        <tr>
          <th>ID</th>
          <th>省份编码</th>
          <th>省份名称</th>
          <th>操作</th>
        </tr>
        <tr v-for="p of map" :key="p.id">
          <td>{
  
  {p.id}}</td>