使用mint-ui怎么實現(xiàn)一個三級聯(lián)動效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)于2013年成立，先為玄武等服務(wù)建站，玄武等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為玄武企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

具體實現(xiàn)：

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

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

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

以下是官網(wǎng)上的實例：

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來進行省份、城市、地區(qū)的選擇時，發(fā)現(xiàn)最大的問題是搞不到符合該插件數(shù)據(jù)格式的數(shù)據(jù)，于是從百度上扒了一份省份、城市、地區(qū)數(shù)據(jù)之后寫了一個函數(shù)對其進行了處理，在這里，共享給大家：

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]
  },

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當前題目：使用mint-ui怎么實現(xiàn)一個三級聯(lián)動效果
文章位置：http://jinyejixie.com/article4/pdcsoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、面包屑導航、自適應(yīng)網(wǎng)站、軟件開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)