【vue 四级联动】

  <a-form-model :model="searchform" layout="inline"><a-form-model-item label="省份"><a-select@change="provinceChange"placeholder="请选择"v-model="searchlist.code_prov"show-searchoptionFilterProp="children"><a-select-optionv-for="item in provinceList":key="item.code_prov":value="item.code_prov":title="item.name_prov">{{ item.name_prov }}</a-select-option></a-select></a-form-model-item><a-form-model-item label="城市"><a-select@change="cityChange"placeholder="请选择"v-model="searchlist.code_city"show-searchoptionFilterProp="children"><a-select-optionv-for="item in cityList":key="item.code_city":value="item.code_city":title="item.name_city">{{ item.name_city }}</a-select-option></a-select></a-form-model-item><a-form-model-item label="区县"><a-select@change="counChange"placeholder="请选择"v-model="searchlist.code_coun"show-searchoptionFilterProp="children"><a-select-optionv-for="item in countryList":key="item.code_coun":value="item.code_coun":title="item.name_coun">{{ item.name_coun }}</a-select-option></a-select></a-form-model-item><a-form-model-item label="街道(乡镇)"><a-selectplaceholder="请选择"v-model="searchlist.code_town"show-searchoptionFilterProp="children"><a-select-optionv-for="item in townList":key="item.code_town":value="item.code_town":title="item.name_town">{{ item.name_town }}</a-select-option></a-select></a-form-model-item><a-form-model-item><a-button type="primary" @click="onSubmitsearch"> 查询 </a-button><a-button style="margin-left: 10px" @click="onCancelsearch">重置</a-button></a-form-model-item></a-form-model>``````javascript
export default {data() {return {searchlist: {code_prov: undefined,code_city: undefined,code_coun: undefined,code_town: undefined,},}
}

  methods: {// 获得 省份getprovince() {this.$http.post('/admin/nationArea/province').then((res) => {if (res.err_code == 0) {this.provinceList = res.data} else {this.$message.error(res.message)}})},// 获得 城市getcity(val) {let params = {code_prov: val,}this.$http.post('/admin/nationArea/city', params).then((res) => {if (res.err_code == 0) {this.cityList = res.data} else {this.$message.error(res.message)}})},// 获得 区县getcountry(val) {let params = {code_city: val,}this.$http.post('/admin/nationArea/country', params).then((res) => {if (res.err_code == 0) {this.countryList = res.data} else {this.$message.error(res.message)}})},// 获得街道，乡镇gettown(val) {let params = {code_coun: val,}this.$http.post('/admin/nationArea/town', params).then((res) => {if (res.err_code == 0) {this.townList = res.data} else {this.$message.error(res.message)}})},provinceChange(val) {this.searchlist.code_city = undefinedthis.searchlist.code_coun = undefinedthis.searchlist.code_town = undefinedthis.getcity(val)},cityChange(val) {this.searchlist.code_coun = undefinedthis.searchlist.code_town = undefinedthis.getcountry(val)},counChange(val) {this.searchlist.code_town = undefinedthis.gettown(val)},}

数据格式

【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用ajax方式实现四级联动
使用ajax方式实现了下简单的四级联动, 数据库: 以下为前台代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <titl ...
laravel在线教育开发__四级联动（地区选择）
在线教育开发之四级联动为了实现地区的四级联动选择,可以使用ajax提交数据到控制器,控制器接收数据之后查询pid对应的area. 1.生成地区数据表,需要四级联动表源码请添+Q1143157804( ...
weui 自定义datepicker 年月日上午下午四级联动的实现
由于项目需求,需要自定制年月日上午这种四级联动,经过模仿官方weui.min.js实现了上述功能. 根据此种样式可以灵活实现月日两级联动或年月日时分秒六级联动功能.代码如下: <link r ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
android三级联动、四级联动（地区选择）
GitHub地址:https://github.com/gamekonglee/RegionSelector 先上效果图: allprojects { repositories { .. maven ...

【vue 四级联动】

【vue 四级联动】相关推荐

最新文章

热门文章