Vue省市区三级联选择器V-Distpicker的使用

Posted 2021-02-13 wenqiangit

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>