vue + mint-ui 省市区级联选择

Posted 2022-12-24 rosendolu

  <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:

• administrative-divisions-of-china
• vant-area