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"

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





