vue + mint-ui 省市區級聯選擇

時間 2019-12-01

標籤 vue mint 省市區級聯選擇简体版

原文原文鏈接

<mt-popup
    v-model="showSelectArea"
    :modal="true"
    position="bottom"
    style="width:100vw;"
  >
    <!-- <p>省份 - 城市 - 區縣</p> -->
    <div class="showToolbar">
      <div @click="controlSelectArea(false)" style="flex:0.5;">取消</div>
      <div style="flex:1;"></div>
      <div @click="controlSelectArea(true)" style="flex:0.5;">完成</div>
    </div>
    <mt-picker
      class="picker"
      :slots="AdminDivisions"
      @change="onAreaChange"
    >
    </mt-picker>
  </mt-popup>

import PCA from './pca.js'  
    // 省市區
      AdminDivisions: [
        {
          flex: 0.5,
          defaultIndex: 0,
          values: Object.keys(PCA),
          className: "",
          textAlign: "center"
        },
        {
          divider: true,
          content: "",
          className: "slot2"
        },
        {
          flex: 1,
          defaultIndex: 0,

          values: [],
          className: "",
          textAlign: "center"
        },
        {
          divider: true,
          content: "",
          className: "slot2"
        },
        {
          flex: 0.5,
          defaultIndex: 0,
          values: [],
          className: "",
          textAlign: "center"
        }
      ],

onAreaChange(picker, values) {
      // 先判斷
      if (PCA[values[0]]) {
        picker.setSlotValues(1, Object.keys(PCA[values[0]]));
        picker.setSlotValues(2, PCA[values[0]][values[1]]);

       // this.area = values.join(" ");
        // this.province = values[0];
        // this.city = values[1];
        // this.area = values[2];
      }
    },

references:vue

相關標籤/搜索