使用mint-ui實現省市區三級聯動效果的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:19:50

使用mint-ui實現省市區三級聯動效果的示例代碼

使用mint-ui實現省市區三級聯動效果的示例代碼:引用插件：餓了么的mint-ui組件中的picker功能，具體API可參照官網說明：http://mint-ui.github.io/docs/#/zh-cn2/picker 背景：項目需要做一個省份-城市-地區的選擇級聯效果，我從gayhub上找了一下，決定使用mint-ui的組件，因為各個功能都很全而且

推薦度：

點擊下載本文 文檔為doc格式

導讀使用mint-ui實現省市區三級聯動效果的示例代碼:引用插件：餓了么的mint-ui組件中的picker功能，具體API可參照官網說明：http://mint-ui.github.io/docs/#/zh-cn2/picker 背景：項目需要做一個省份-城市-地區的選擇級聯效果，我從gayhub上找了一下，決定使用mint-ui的組件，因為各個功能都很全而且

引用插件：餓了么的mint-ui組件中的picker功能，具體API可參照官網說明：http://mint-ui.github.io/docs/#/zh-cn2/picker

背景：項目需要做一個省份-城市-地區的選擇級聯效果，我從gayhub上找了一下，決定使用mint-ui的組件，因為各個功能都很全而且設計跟我們的項目風格類似。

具體實現：

通過閱讀官網的實例，大概就能知道這個組件的用法：

在vue中寫入組件：<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

我們可以看到，這個組件中傳入的數據slots和當其改變是觸發的事件：onValuesChange()，所以只要在使用該組件的父組件內注冊slots和onValuesChange就可以實現了

以下是官網上的實例：

export default {
 methods: {
 onValuesChange(picker, values) {
 if (values[0] > values[1]) {
 picker.setSlotValue(1, values[0]);
 }
 }
 },
 data() {
 return {
 slots: [
 {
 flex: 1,
 values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
 className: 'slot1',
 textAlign: 'right'
 }, {
 divider: true,
 content: '-',
 className: 'slot2'
 }, {
 flex: 1,
 values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
 className: 'slot3',
 textAlign: 'left'
 }
 ]
 };
 }
};

在實際操作中當我想使用picker來進行省份、城市、地區的選擇時，發現最大的問題是搞不到符合該插件數據格式的數據，于是從百度上扒了一份省份、城市、地區數據之后寫了一個函數對其進行了處理，在這里，共享給大家：

onProvinceChange(picker, values) {
 
 this.province = picker.getValues()[0]
 var cityArr = [];
 for(var key in provinceCity[this.province]) {
 cityArr.push(key);
 }
 this.slots2[0].values = cityArr;
 },
 onCityChange(picker, values) {
 this.city = picker.getValues()[0]
 var countyArr = [];
 for(var key in provinceCity[this.province][this.city]) {
 countyArr.push(key);
 }
 this.slots3[0].values = countyArr;
 },
 onCountyChange(picker, values) {
 
 this.county = picker.getValues()[0]
 },

三組數據以及三個方法如上，當對省份進行選擇時，動態匹配相應的城市，同理對城市進行選擇時動態匹配相應的地區，如此就可以實現三級聯動的效果了

以上這篇使用mint-ui實現省市區三級聯動效果的示例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com