關(guān)于mintui中picker的二級聯(lián)動

馬忠志發(fā)布于2019-08-22 16:40 / 674人閱讀

摘要：今天做的項目有個關(guān)于選擇部門再選擇人員的功能，我用到了的。根據(jù)的會發(fā)現(xiàn)每次，函數(shù)都會被調(diào)用三次。大概是默認(rèn)里面有三個。經(jīng)過研究，可以換一種寫法添加兩個取消確定選完一級，再獲取二級內(nèi)容

今天做的項目有個關(guān)于選擇部門再選擇人員的功能，我用到了min-ui的picker。
根據(jù)mintui的api


export default {
  methods: {
    onValuesChange(picker, values) {
      console.log("change");
    }
  },
  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"
        }
      ]
    };
  }
};

會發(fā)現(xiàn)每次change，onValuesChange函數(shù)都會被調(diào)用三次。大概是mintui默認(rèn)里面有三個picker。
經(jīng)過研究，可以換一種寫法,添加兩個picker


    
        取消
        確定

選完一級，再獲取二級內(nèi)容

data () {

return {
    slots: [
        {
          flex: 1,
          values: [],
          defaultIndex:0,
          className: "slot1",
          textAlign: "center"
        }, {
          divider: true,
          content: "-",
          className: "slot2",
          textAlign: "right"
        }
    ],
    slots1:[
        {
          flex: 1,
          values: [],
          defaultIndex:1,
          className: "slot3",
          textAlign: "center"
        }
    ]
}

}

onValuesChange(picker,values){
    if(values[0] && values[0].userlist != undefined){
        this.slots1[0].values = [];
        for(var key in values[0].userlist) {
            this.slots1[0].values.push(values[0].userlist[key]);
        }
    }
}