一个简单的VUE选择城市组件

首先看下效果：

 

 

ps： 请忽略上面的水印

该组件基于vue + iview搭建而成，可以根据需求自行修改，接下来就是组件的整体的说明了；

一、目录结构

这是一个常规的VUE的目录的结构，我们使用的文件就是图片中的用圈标注的文件；

二、文件介绍

1. chooseCity.vue

这个文件就是我们的使用的最核心的文件，关于这个选择城市的三级联动的相关处理都在这个文件中进行。

<template>
    <!--这里是我们的html结构-->
    <div class="chooseCity">
      <Select v-model="model1" style="min-width:150px;max-width: 160px;" @on-change="deleteModel(1)">
        <Option v-for="item in firstFloorDatas" :value="item.id" :key="item.id">{
  { item.name }}</Option>
      </Select>
      <Select v-model="model2" style="min-width:150px;max-width: 160px;" v-if="showSecond" @on-change="deleteModel(2)">
        <Option v-for="item in secondFloorDatas" :value="item.id" :key="item.id">{
  { item.name }}</Option>
      </Select>
      <Select v-model="model3" style="min-width:150px;max-width: 160px;" v-if="showThird" >