vue.js 省市县三级联动如何实现

vue.js 省市县三级联动如何实现

我是这样实现的：

1. 第一步：先将存好数据的js文件放在 utils 文件夹下

		![我是放在这个位置，大家可以根据自己的情况存放](https://img-blog.csdnimg.cn/20200613113527389.png#pic_center)
		**这里我在附上 js文件的数据格式**
		![因为数据过多我直截取部分代码](https://img-blog.csdnimg.cn/20200613113658928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgxODMzNw==,size_16,color_FFFFFF,t_70#pic_center)

1. 第二步：引进js文件 在data里边调用：

   
   

3. 第三步：就是写把需要的样式写好 ，数据都绑定上：

4. 最后一步，就是把方法写出来，也算是核心部分：

这些方法也是关键，我这里是后台需要多个参数值，所以在 value 里边传了 id 和name，然后方法拿到各各需要的参数。大家也可以直接用 value=“name”
这里注意一点就是，必须要拿到这个 name 因为 方法里边需要做判断。
其实也不复杂，就是 第一个下拉框渲染之后 ，数据也双向绑定完成，就拿下拉框选取的 省份 和 遍历出来的 省份做对比，
如果对上了，那就拿到该省份下的 市区。
同样的方法给市级做对比 拿到 县区，然后做渲染就ok了！
最后 onCountys 这个方法是根据大家自己需求来定，如果选择完县你需要走其他方法 就用 如果不需要，不写这个方法也可 以 自己视情况而定。 到这里 三级联动就完成了！
下面附上代码： 引入的就自己搞吧 js太长上传不了

<!-- 地址选取 -->
            <el-form ref="form" :model="city" label-width="80px" style="margin-top:20px">
               <el-form-item label="收货地址">
                <el-select v-model="city.province" placeholder="请选择省份" @change="onProvinces($event)" style="width:150px;margin-right:20px">
                  <el-option v-for="item in province" :key="item.name" :label="item.name" :value="item.name+'/'+item.id"></el-option>
                </el-select>
                <el-select v-model="city.town" placeholder="请选择市区"  style="width:150px;margin-right:20px" @change="onTowns($event)" v-if="ontown">
                      <el-option v-for="item in Town" :key="item.name" :label="item.name" :value="item.name+'/'+item.id"></el-option>
                </el-select>
                <el-select v-model="city.county" placeholder="请选择县" style="width:150px" v-if="oncounty" @change="onCountys($event)">
                      <el-option v-for="item in county" :key="item.name" :label="item.name" :value="item.name+ '/' +item.id" ></el-option>
                  </el-select>
              </el-form-item>
            </el-form>

  province: cityList, // 省份
      Town: [], // 市区
      county: [], // 县
      bid: {}, // 县id共享
      onprovince: {}, // 共享 p id
      city: { // 三级联动
        province: '',
        town: '',
        county: ''
      },

   onProvinces ($event) {
      var self = this
      var provinceA = this.city.province.split('/')[0]
      this.province.forEach(function (item, index) {
        if (item.name === provinceA) {
          self.Town = item.sub
        }
      })
      this.ontown = true
    },
    onTowns ($event) {
      var self = this
      var townA = this.city.town.split('/')[0]
      this.Town.forEach(function (item, index) {
        if (item.name === townA) {
          self.county = item.sub
        }
      })
      this.oncounty = true
    },
    onCountys ($event) {
      console.log(this.city.county.split('/')[1])
    },