在vue中實現省市區的下拉聯動

2021-09-02 22:40:16 字數 1668 閱讀 8016

drop table if exists `region`;

create table `region` (

`id` bigint(20) unsigned not null auto_increment comment '該地區的自增id',

`parent_id` bigint(20) unsigned null default 0 comment '該地區的上乙個節點的地區id',

`region_name` varchar(20) character set utf8 collate utf8_general_ci null default null comment '地區名',

`region_type` tinyint(3) unsigned null default 0 comment '地區的層級',

`is_delete` tinyint(3) unsigned null default 0 comment '是否刪除(0:未刪除;1:已刪除)',

`region_code` varchar(50) character set utf8 collate utf8_general_ci null default null comment '行政區編碼',

primary key (`id`) using btree

) engine = innodb auto_increment = 20593 character set = utf8 collate = utf8_general_ci comment = '系統地區表' row_format = compact;

逐個分析

1. 下拉框

2. data

data() 

};}

3. methods

// 載入省元資料

getprovince() )

},// 改變省

changequeryprovince() )

} else

},// 改變市

changequerycity() )

} else

}

// 引入 api 中的查詢方法

import from "@/api/address/address";

檔案 中的查詢 api 方法

export function getsystemregions(parentid)

})}

created()
4.  還有一點很重要的就是 response.data.data 返回的資料就是本文最上面地區表的一些字段,封裝到 list 集合中就可以了

連貫**

如果有朋友需要資料庫測試資料,我也可以整一些出來

歡迎來訪我的vue專欄總篇部落格

希望能夠幫助到你

over

Vue 元件放送之下拉省市區聯動

省市區聯動,又是乙個常見的元件。一般來說,通過select元素的onchange事件來實現,難度不大。而如今換作 vue 框架下,該如何實現呢?這正事我們接下來要 的,但先請容我說,甚至比舊方法更簡單!這就是來自資料驅動 mvvm 的威力!什麼是資料驅動呢?往大的說,可以很大 fei hua 且不同...

Jquery實現省市區聯動

jquery 省市縣聯動外掛程式 author kxt example test province city county fn.province city county function vprovince,vcity,vtown get xml province city.xml functio...

vue省市區三聯動下拉選擇元件的實現

我們曾經經常會遇到需要選擇省市區的需求,我們可能是找乙個外掛程式來實現,但是有了vue之後,我們自己完全可以簡單的實現這個效果,並封裝為獨立的.vue元件,便於日後使用 我們今天來實現乙個 利用vuejs開發的 省市區三聯動的元件 cityselect.vue元件 首先來看一下最終的效果 沒有寫太多...