vue基于element三级联动城市功能(完整demo代码)级联菜单

最新推荐文章于 2024-08-15 17:21:58 发布

就像风1样

最新推荐文章于 2024-08-15 17:21:58 发布

阅读量2.5k

点赞数 1

分类专栏： Vue vue专栏文章标签： vue 城市联动三级联动级联

本文链接：https://blog.csdn.net/qq_42221334/article/details/87889798

版权

本文分享了如何使用Vue和Element UI实现三级城市联动的功能，提供了完整的Demo代码和数据源链接。适合需要进行多级联动选择场景的开发者参考。

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

先来张图（包含2级联动）：

三级城市数据 json

链接：https://pan.baidu.com/s/1NKJcN4VFe4MuqRwKJD3PXg 提取码：gspv

和同事一块开发的项目！之前没用element做过城市联动，这里同事写好的拿来复用，感觉方法还可以记录下来

直接上代码（包含2级联动），请忽略多余部分代码

<template>
  <div class="wrap">
    <div class="inner">
      <div class="advs">
        <h2>提交说明</h2>
        <div>
          <p>提交后商家会进行审核，审核成功你、计划会进入商家需求</p>
          <p>
            审核成功后，需按头缴纳保证金
          </p>
        </div>
      </div>
      <div class="form" >
        <el-form :model="form" label-width="120px" :rules="rules" ref="ruleForm">


          <el-form-item label="品种" prop="type2" v-if="ApplyType==0">
            <el-select placeholder="请选择" v-model="form.type2" style="width:102px">
              <el-option v-for="(item,index) in twoName" :key="index" :label="item.cate_name" :value="item.cateid" ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="品种" prop="type1" v-if="ApplyType==1">
            <el-select placeholder="请选择" @change="name1" v-model="form.type1" style="width:102px">
              <el-option v-for="(item,index) in oneName" :key="index" :label="item.cate_name" :value="item.cateid" ></el-option>
            </el-select>
            <el-select placeholder="请选择" v-model="form.type2" style="width:102px">
              <el-option v-for="(item,index) in twoName" :key="index" :label="item.cate_name" :value="item.cateid"></el-option>
            </el-select>
          </el-