首先看下通過mint-ui實現(xiàn)的三級聯(lián)動效果截圖
三級聯(lián)動效果
問題1:關于mint-ui格式問題
官網(wǎng)給的數(shù)據(jù)格式是:
官網(wǎng)格式
但是我們在使用的時候,數(shù)據(jù)可能是接口請求返回的或者自己引入的數(shù)據(jù)猾蒂。所以這里會用到computed去整理數(shù)據(jù)滤钱。
這里的this.initPD/this.initCD/ this.initXD 都是需要在created生命周期中就設定好數(shù)據(jù)刘离,否則picker組件會因為初始化出現(xiàn)問題拔恰。因為initPD這些數(shù)據(jù)在data中是空的。
問題2:關于初始化picker選中返回values數(shù)組中0位為undefined的問題亏推。
解決:
在他的組件源碼中picker.vue,slotValueChange事件用于change返回values年堆,所以在這里判斷一下如果返回的數(shù)據(jù)中0位為undefined吞杭,將其設置為傳入slots[0]所對應的values[0]。
基本上是解決了代碼問題变丧,因為涉及到的邏輯比較多芽狗,就不大動源碼了= ?=?
返回如下: