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.valuethis.temp.addresscity = data.city.valuethis.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

利用上面的方法可以实现只取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>