Vue省市區三級聯選擇器V-Distpicker的使用

Vue省市區三級聯選擇器V-Distpicker的使用

最近用的Vue+Element UI時，有些地方須要用到省市區三聯選擇器，網上安裝並嘗試了多種相似的插件，但都由於沒法正常實現或是沒有眼緣而棄用了。最後選擇的是V-Distpicker這種，配置和使用起來還算是比較簡單的，下面就分享一下其用法和須要注意的點（須要踩過的坑）。

1.使用方法

安裝和文檔，請查看官網https://distpicker.pigjian.com/

​ 或者 同性交友網站https://github.com/jcc/v-distpicker

有些小夥伴要說了，不是說好了分享使用方法嗎？扔出兩個連接就完事啦？嗯...其實呢，我是以爲這個做者文檔寫的很不錯了各類用法介紹的很到位，並且在官網你還能嘗試具體操做的嘛（其實就是懶）。

2.須要注意的點

​ 若是是本身玩的話，做者提供的方法就夠了，我用的是三級關聯不帶初始值的這種

官網的code :

<template>
  <v-distpicker @selected="onSelected"></v-distpicker>
<template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker },
  methods: {
    onSelected(data) {
      alert(data.province + ' | ' + data.city + ' | ' + data.area)
      console.log(data)
    },
  }
}
</script>

​ 這個插件的用法簡單，重點就是注意province、city、area值的綁定，這裏我用的官方給的selected方法，選擇最後一項後觸發，talk is cheap,show code !

<v-distpicker v-show="isShowProvince" :class="{'disabled-select': dialogStatus=='update'}" :province="temp.addressprovince" :city="temp.addresscity" :area="temp.address__dist" @selected="onSelected"></v-distpicker>

<script>
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
    }
}

以後根據每一個項目網絡接口不一樣，把值傳給後端就行啦。

然而在用Element UI進行表單驗證（是否爲必填項）的時候，踩了一個坑。Element  UI 驗證的時候，是依次驗證每一項有沒有選擇框沒填，然而V-Distpicker這東西一個插件裏面有三個選擇框即須要綁定三個值，這時我靈感一來使用的方法是Element  UI表單驗證只驗證area的值，由於只有你province與city都選擇了，纔有可能area也選擇了，嘗試了一下，大功告成！

經過樣式穿透的方法，能夠更改其子組件的樣式：

.disabled-select >>> select {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}

注意使用樣式穿透時上面那個disabled-select位置的class必定是本身定義的class不能，且不論你是須要穿透的class的父級元素仍是祖父級，只要能包含它就能夠。 另外style裏不能添加lang="scss"。？ 不肯定

3. 如何有選擇性的選遞給後端值呢?

按照官網給出的例子選擇器選好以後是這樣的一種結構

{
  "province": {
    "code": "210000",
    "value": "遼寧省"
  },
  "city": {
    "code": "210400",
    "value": "撫順市"
  },
  "area": {
    "code": "210411",
    "value": "順城區"
  }
}

若是個人後臺只須要code或者value該如何作？ 其實官網最下方已經給出了方法：

Methods

方法	說明	參數
province	選擇省份	返回省份的值
city	選擇城市	返回城市的值
city	選擇地區	返回地區的值
selected	選擇最後一項時觸發	返回省市區的值

利用上面的方法能夠實現只取code仍是value 仍是其餘操做。。

下面是具體案例代碼：

<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);
        });
    }
  }
};
</script>