mint-ui picker組件踩坑記錄

在h5實現省市區的三級聯動，使用了mint-ui，記錄一下本身遇到的問題。防止下次踩坑

<mt-picker :slots="areaList" valueKey="name" @change="selectArea"></mt-picker>
複製代碼

官網給的綁定的數據格式

areaList: [
        {
          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'
        }
      ]
    };
複製代碼

可是後臺可能返回的values數據是這樣的
複製代碼

value:[{id:1, name: '北京'}, {id:2, name: '上海'}, {id:3, name: '廣州'}]
複製代碼

這樣顯示就不是咱們想要的效果，這裏咱們就要給mt-picker組件加上valueKey=name。這樣就能達到咱們想要的效果
複製代碼

第二個問題

area(id) { //調取地區函數
        return new Promise((resolve, reject) => {
          this.$ajax({
            url: `/api/region/list/sub/${id}`,
            method: 'GET'
          }).then((res) => {
            resolve(res)
          }).catch((err) => {
            reject(err)
          })
        })
      },
      selectArea(picker, values) { //選擇區域
        if (this.flag) {
          this.area(values[0].id).then((res) => { //經過一級省的Id獲取市的列表
            picker.setSlotValues(1, res)   //將市的地區列表放入areaList的二級列表中
          })
          this.pickerValue = picker.getValues()
        }
      },
複製代碼

有一個問題，使用官方給定的方法，在選中第二級市的時候，選中的那一幾級不會給定選中的樣式，目前不知道怎麼解決。。