首先看下效果:
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" >