iview+vue 省市区三级联动

最新推荐文章于 2022-08-10 15:42:58 发布

原创

最新推荐文章于 2022-08-10 15:42:58 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #json #前端

本文介绍如何利用iview组件库的Select组件，结合JSON数据，实现在Vue项目中省市区三级联动的功能。通过监听on-change事件，动态更新市、区/县的选择选项，确保数据的联动和回显。

iview+vue 省市区三级联动

利用iview的下拉框实现三级联动功能在这里插入图片描述
省市区的所有数据是一个json文件。类似于这种格式的，自己可以在项目里引入（需要可以留言）

话不多说上代码首先在data中定义初始化变量，我是为了方便将省市区的变量放到model对象里，然后定义addressOptions的数组接受省市区的所有数据，cityOptions是用来接受市的数组，countiesOptions是用来接收县或者区的数据，

model: {
   
   
        provinceName:'',//省
        cityName:'',//市
        countyName:'' ,//区
      },
      addressOptions:[],//城市三级联动数据
      cityOptions:[], //市
      countiesOptions:[],//县/区

下面展示template模块

<FormItem label="所在城市" required>
            <Row>
              <Col span="8">
                <Select
                  @on-change="optionsChangeProvince($event)"
                  v-model="model.provinceName"
                  placeholder="省"
                  clearable
                  style="width: 150px">
                  <Option
                    v-for="items in addressOptions"
                    :value="items.provinceName"
                    :key="items.provinceCode"