3. 三级联动(不带“全部”选项)
<el-cascader
v-model=“selectedOptions2”
class=“long”
size=“large”
:options=“regionData”
@change=“handleChange”
/>
其中数据selectedOptions2格式如下所示:
selectedOptions2: [‘120000’, ‘120100’, ‘120101’],
而选中数据后,获得的数据格式同样是一个数组集合,如下所示:
几种界面组件的效果如下所示。
省市区三级联动的案例Demo代码如下。
<el-cascader
size=“large”
:options=“options”
v-model=“selectedOptions”
@change=“handleChange”>
===================================================================================
除了上面的 element-china-area-data 第三方组件,还有一个v-region的省市区街道的组件也做的不错,地址是:https://github.com/TerryZ/v-region 。
它的主要特点是支持 “省/直辖市”、“市”、“区/县”、“乡/镇/街道” 4级行政区域选择,可以选择Select的方式,或者分组方式展示,功能比较多样化一些。
或者:
这个v-region已经封装为组件进行使用,所以使用上更加简化一些,如下简单的界面声明即可使用。
常规表单下拉选择元素模式
Regular form element with select tag
街道可以包含,也可以省略,如果省略就是省市区县的三级选择了。这个组件的几种用法如下所示。
基于v-region控件省市区街道选择组件
常规表单下拉选择元素模式
<v-region v-model=“selectedRegion” :town=“true” @values=“regionChange” />
多分组切换模式
<v-region
v-model=“modelGroup”
:town=“true”
type=“group”
@values=“regionChange”
/>
多列竖排模式
Column group
<v-region type=“column” @values=“regionChange” />
城市选择器
City picker
<v-region type=“city” :city-picker=“true” @values=“regionChange” />
这个组件如果是省市区县街道模式的话,需要设置初始化值就是一个对象的格式,如下所示。
selectedRegion: {
province: ‘350000’,
city: ‘350100’,
area: ‘350104’,
town: ‘350104008’
}
例如,我在一个业务表的案例界面中,就涉及到了省市区街道的选择处理,就是采用了这个v-region的组件进行展示处理的。界面效果如下所示。
如果是新建窗体的时候,我们可以指定组件的默认值,如下的数据格式:
selectedRegion: { province: ‘440000’, city: ‘440100’, area: ‘440111’, town: ‘440111010’ },
另外,我们一般需要在数据库里面存储对应的省市区县的数据,以便查询或者其他需要,那么我们就需要在选择数据变化的时候,设置一下对应的属性字段,如下所示。
// 修改编辑窗体的省市区街道
changeEditRegion(data) {
console.log(data)
if (data) {
this.editForm.province = data.province ? data.province.key : ‘’;
this.editForm.city = data.city ? data.city.key : ‘’;
this.editForm.district = data.area ? data.area.key : ‘’;
this.editForm.street = data.town ? data.town.key : ‘’;
// console.log(this.editForm)
}
},
而在展示对话框的时候,我们则可以组合省市区数据,作为v-region组件的初始化值,如下代码使用。
=======================================================================
一般情况上,使用上面的方式就能解决问题了,不过这里介绍另外一种思路,就是基于数据库数据的方式进行省市区联动的处理。
以前我在开发系统的时候,引入了省市区的数据,存储在几个数据库表里面,然后通过接口的方式检索省市区及处理器联动过程。
那么在基于这些数据的基础上,我们也可以这样处理的。
首先我们创建省、市、区县的表,并在后端发布对应的API接口,如我的ABP后端接口展示。
然后在根据这些接口,构建好对应的API客户端,再在界面引入使用,通过定义自定义组件的方式来整合使用则更加简单。
在定义一个自定义组件my-citypicker,组件代码如下所示。
<el-select v-model=“provinceValue” placeholder=“请选择省” @change=“chooseProvince”>
<el-option
v-for=“item in provinceData”
:key=“item.id”
:label=“item.provinceName”
:value=“item.id”
/>
<el-select v-model=“cityValue” placeholder=“请选择市” @change=“chooseCity”>
<el-option
v-for=“item in cityData”
:key=“item.id”
Vue
-
什么是MVVM?
-
mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?
-
组件之间的传值?
-
Vue 双向绑定原理
-
描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?
-
虚拟 DOM 实现原理
-
Vue 中 key 值的作用?
-
Vue 的生命周期
-
Vue 组件间通信有哪些方式?
-
vue 中怎么重置 data?
-
组件中写 name 选项有什么作用?
-
Vue 的 nextTick 的原理是什么?
-
Vuex 有哪几种属性?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】