使用vue实现四级联动

一、使用vue+elementUI实现四级联动

1、json数据：借用大神的

2、简单粗暴：代码如下

<template><div><p>当前您选择了: {{form.province}}-{{form.city}}-{{form.region}}-{{form.street}}</p><el-form ><el-form-item label="行政区划"><div><el-select v-model="form.province" placeholder="省级" @change="changePr"><el-option v-for="item in provinceList" :key="item.code" :label="item.label" :value="item.name"></el-option></el-select><el-select v-model="form.city" placeholder="市级" @change="changeCi"><el-option v-for="item in cityList" :key="item.code" :label="item.label" :value="item.name"></el-option></el-select><el-select v-model="form.region" placeholder="区级" @change="changeRe"><el-option v-for="item in regionList" :key="item.code" :label="item.label" :value="item.name"></el-option></el-select><el-select v-model="form.street" placeholder="街道" ><el-option v-for="item in streetList" :key="item.code" :label="item.label" :value="item.name"></el-option></el-select></div></el-form-item></el-form></div>
</template><script>import pacas from '@/assets/pacas.json'export default {data () {return {data: pacas,form: { // 创建单位管理formprovince: '', // 行政区划——省city: '', // 行政区划——市region: '', // 行政区划——区street: '', // 行政区划},provinceList: [], // 存放省数据集合cityList: [], // 存放市数据集合regionList: [], // 存放区数据集合streetList: [], //存放街道数据集合}},created() {//获取省this.provinceList = this.data},computed: {},methods: {changePr() {for(var key of this.data) {if(key.name == this.form.province) {this.cityList = key.childrenthis.form.city = key.children[0].name //默认选择第一个显示}}this.changeCi()this.changeRe()},changeCi() {this.cityList.forEach((item,index) => {if(item.name == this.form.city) {this.regionList = item.childrenthis.form.region = item.children[0].name //默认选择第一个显示}})this.changeRe()},changeRe() {this.regionList.forEach((item1,index1) => {if(item1.name == this.form.region) {this.streetList = item1.childrenthis.form.street = item1.children[0].name  //默认选择第一个显示return;}})}}}
</script><style>
</style>

3、over

使用vue实现四级联动相关推荐

vue 四级联动地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第二: 数据封装情况,详见代码部分 data中的 data; 满足以上2 ...
vue省市区镇四级联动
vue省市区镇四级联动参考文档https://terryz.gitee.io/vue/#/region/demo 使用npm把插件安装到项目中 npm i -S v-region 在项目入口main ...
国,省,市,区(县)(四级联动)
国,省,市,区(县)(四级联动) 一, 技术栈:Vue + Quasar + Vuelidate + axios 二, 具体代码(表单验证规则Vuelidate上篇文章已经写过了,这里就不多做介绍咯) ...
通用四级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-09-03 Blog: http://shaoyun.cnblogs.com/ 前面的文 ...
html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
工作185：解决vue+el-element二级联动，选项选择后不显示的问题
一.问题描述 vue的二级联动可以采用v-if的方式去实现,也就是在第一级选项的值发生变化后,清空第二级选项所关联的model的值,并将第二级选项所取的变量数组变更.会产生的问题是,第二级选项的值有时 ...
php用ajax方式实现四级联动
使用ajax方式实现了下简单的四级联动, 数据库: 以下为前台代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <titl ...
laravel在线教育开发__四级联动（地区选择）
在线教育开发之四级联动为了实现地区的四级联动选择,可以使用ajax提交数据到控制器,控制器接收数据之后查询pid对应的area. 1.生成地区数据表,需要四级联动表源码请添+Q1143157804( ...
weui 自定义datepicker 年月日上午下午四级联动的实现
由于项目需求,需要自定制年月日上午这种四级联动,经过模仿官方weui.min.js实现了上述功能. 根据此种样式可以灵活实现月日两级联动或年月日时分秒六级联动功能.代码如下: <link r ...

使用vue实现四级联动

一、使用vue+elementUI实现四级联动

使用vue实现四级联动相关推荐

最新文章

热门文章