Vue 시내 3단 연결 선택기 V-distpicker 사용

Vue 시내 3단 연결 선택기 V-distpicker 사용
최근에 사용한 Vue+Element UI는 일부 지역에서 성, 시내 3연 선택기를 사용해야 했다. 인터넷에 비슷한 플러그인을 설치하고 시도했지만 정상적으로 실현할 수 없거나 안연이 없어서 사용하지 않았다.마지막으로 선택한 것은 V-distpicker 같은 것으로 설정과 사용이 비교적 간단한 편이다. 다음은 그 사용법과 주의해야 할 점(밟아야 할 구덩이)을 공유한다.
1. 사용법
설치와 문서, 홈페이지를 보십시오https://distpicker.pigjian.com/
동성 친구 사이트https://github.com/jcc/v-distpicker
몇몇 동료들이 말하려고 하는데, 사용법을 공유하기로 하지 않았습니까?링크 두 개 던지면 끝이야?음..사실은요. 저는 이 작가가 문서를 아주 잘 썼다고 생각해요. 여러 가지 용법을 잘 소개했고 홈페이지에서 구체적인 조작을 시도할 수 있잖아요.
2. 주의해야 할 점
혼자 놀면 작가가 제공한 방법이면 충분해요. 저는 3급 관련에 초기치가 없는 이런 걸 썼어요.
홈페이지 코드:

이 플러그인의 사용법은 간단합니다. 중요한 것은 province,city,area 값의 귀속을 주의하는 것입니다. 여기서 제가 사용한 공식적인 selected 방법은 마지막 항목을 선택한 후에 터치합니다. talk is cheap,show code!

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
 data() {
    return {
      temp: {
        addressprovince: '',
        addresscity: '',
        addressdist: '',
      },
    }
  },
  methods: {
    onSelected(data) {
      this.temp.addressprovince = data.province.value
      this.temp.addresscity = data.city.value
      this.temp.addressdist = data.area.value
    }
}
</code></pre> 
   <p>              ，         。</p> 
   <pre><code>    Element UI      （      ）   ，     。Element  UI      ，                ，  V-Distpicker                       ，             Element  UI       area  ，     province city    ，    area    ，     ，    ！

         ，           ：</code></pre> 
   <pre><code class="language-css"><code>.disabled-select >>> select {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}</code></code></pre> 
   <p>             disabled-select   class        class  ，          class          ，         。   style     lang="scss"。？    </p> 
   <h1 id="              ">3.               ?</h1> 
   <p>                        </p> 
   <pre class="json"><code>{
  "province": {
    "code": "210000",
    "value": "   "
  },
  "city": {
    "code": "210400",
    "value": "   "
  },
  "area": {
    "code": "210411",
    "value": "   "
  }
}</code></pre> 
   <p>         code  value    ？               ：</p> 
   <h3 id="methods">Methods</h3> 
   <table> 
    <thead> 
     <tr class="header"> 
      <th style="text-align:left;">  </th> 
      <th style="text-align:left;">  </th> 
      <th style="text-align:left;">  </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td style="text-align:left;"><strong>province</strong></td> 
      <td style="text-align:left;"><strong>    </strong></td> 
      <td style="text-align:left;">      </td> 
     </tr> 
     <tr class="even"> 
      <td style="text-align:left;"><strong>city</strong></td> 
      <td style="text-align:left;"><strong>    </strong></td> 
      <td style="text-align:left;">      </td> 
     </tr> 
     <tr class="odd"> 
      <td style="text-align:left;"><strong>city</strong></td> 
      <td style="text-align:left;"><strong>    </strong></td> 
      <td style="text-align:left;">      </td> 
     </tr> 
     <tr class="even"> 
      <td style="text-align:left;"><strong>selected</strong></td> 
      <td style="text-align:left;"><strong>         </strong></td> 
      <td style="text-align:left;">       </td> 
     </tr> 
    </tbody> 
   </table> 
   <p>             code  value       。。</p> 
   <p>         ：</p> 
   <pre class="vue"><code><template>
 <div class="addr">
    <v-distpicker
    :province="newInfo.province"
    :city="newInfo.city"
    :area="newInfo.district"
    @province="getProvince"
    @city="getCity"
    @area="getArea"
    ></v-distpicker>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import { getAddress, addAddress, updateAddress, delAddress } from "@/api/api";
export default {
  data() {
    return {
      updateIndex: "",
      newInfoEmpty: {
        province: "", // 
        city: "", //  
        area: "", //  
        receiveName: "", //      
        addr: "" //     
      },
      newInfo: {
        province: "", // 
        city: "", //  
        area: "", //  
        receiveName: "", //      
        addr: "", //     
        phone: ""
      },
      receiveInfoArr: [
        // {
        //     id: '',
        //     province: '', // 
        //     city: '', //  
        //     area: '', //  
        //     receiveName: '', //      
        //     addr: '', //     
        // }
      ]
    };
  },
  props: {},
  components: {
    VDistpicker
  },
  created() {
    this.getReceiveInfo();
  },
  watch: {},
  computed: {},
  methods: {
    bubble(index) {
      this.currentIndex = index;
    },
    updateProvince(data) {
      this.receiveInfoArr[this.currentIndex].province = data.value;
    },
    updateCity(data) {
      this.receiveInfoArr[this.currentIndex].city = data.value;
    },
    updateArea(data) {
      this.receiveInfoArr[this.currentIndex].district = data.value;
    },

    getProvince(data) {
      this.newInfo.province = data.value;
    },
    getCity(data) {
      this.newInfo.city = data.value;
    },
    getArea(data) {
      this.newInfo.district = data.value;
    },
    getReceiveInfo() {
      //       
      getAddress()
        .then(response => {
          console.log(response);
          this.receiveInfoArr = response;
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    addReceive() {
      //      
      addAddress(this.newInfo)
        .then(response => {
          alert("    ");
          //     
          this.getReceiveInfo();
          this.newInfo = Object.assign({}, this.newInfoEmpty);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    confirmUpdate(id, index) {
      //       
      updateAddress(id, this.receiveInfoArr[index])
        .then(response => {
          alert("    ");
          this.getReceiveInfo();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    deleteInfo(id, index) {
      //        
      delAddress(id)
        .then(response => {
          alert("    ");
          this.getReceiveInfo();
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};

전재 대상:https://www.cnblogs.com/wenqiangit/p/10538826.html