我們曾經經常會遇到需要選擇省市區的需求,我們可能是找乙個外掛程式來實現,但是有了vue之後,我們自己完全可以簡單的實現這個效果,並封裝為獨立的.vue元件,便於日後使用
我們今天來實現乙個 利用vuejs開發的 省市區三聯動的元件 cityselect.vue元件
首先來看一下最終的效果(沒有寫太多的樣式...)
元件所需要的省市區的json資料(已經封裝為commonjs模組了): provinces.js
這個資料中有這樣幾個字段:
code: 當前省市區的編碼
sheng: 當前所在的省
name: 省市區的名字
level: 級別,省 level = 1, 市 level=2, 區/縣城 level = 3
di: 縣,市級別的區分
如何使用?
這裡採用了 v-model暴露介面, 所以我們下拉選擇的值,你只需要在 v-model繫結的屬性中去拿即可
我們使用的字段是 cityinfo用於接收元件的資料, 元件為了返回足夠的資料, 它是乙個物件
使用**示例 :
app.vue
vue 省市區三聯動 demo程式設計客棧;/h5>
v-model的值是}
從v-model得知,你選擇了 }
cityname是我們需要展示的資料,作為乙個計算屬性而存在,因為這個值是不斷變化的,從cityinfo中抽取出來的資料
下面我們來看一下元件的實現**
cityselect.vue
} } }
元件關鍵點說明:
html模板採用三個 select下拉控制項,分別具有v-model由於繫結選擇的資料,使用v-for遍歷省市區資料
data中的資料,分別是選中的省市區的值(物件形式); 以及當前這個省的城市,這個城市的區,見名知意
在create鉤子函式中我們進行了資料的初始化,預設我們顯示北京相關的資訊,改變v-model對應的屬性值
實現三聯動的重點:
省市區聯動選擇
js 本來返回的是地區編號，需要在後台轉換，這裡我改了一點，直接在js 裡就轉換了，返回的就是地區名 原理是js 控制的聯動查詢，通過一些判斷語句 將選擇的結果另外放在了隱藏的輸入框裡，後台讀取隱藏的輸入框就好，如將出生省份的值存到了id為txtchildrenprovince的輸入框 docume...
Vue 元件放送之下拉省市區聯動
省市區聯動，又是乙個常見的元件。一般來說，通過select元素的onchange事件來實現，難度不大。而如今換作 vue 框架下，該如何實現呢？這正事我們接下來要 的，但先請容我說，甚至比舊方法更簡單！這就是來自資料驅動 mvvm 的威力！什麼是資料驅動呢？往大的說，可以很大 fei hua 且不同...
在vue中實現省市區的下拉聯動
drop table if exists region create table region id bigint 20 unsigned not null auto increment comment 該地區的自增id parent id bigint 20 unsigned null defau...