pickerTwon.vue 935 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <picker @change="townPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
  3. <slot></slot>
  4. </picker>
  5. </template>
  6. <script>
  7. const { data, province, city, area, town } = require('province-city-china/data');
  8. export default {
  9. data() {
  10. return{
  11. value: [0],
  12. array: {},
  13. c: {},
  14. }
  15. },
  16. props: ["arry"],
  17. mounted() {
  18. this.townList()
  19. },
  20. methods: {
  21. //接到信息
  22. townList() {
  23. this.array={}
  24. this.array.town = []
  25. for (let i = 0 ; i<this.arry.length ;i++) {
  26. this.array.town.push({
  27. name: this.arry[i].name
  28. })
  29. }
  30. },
  31. // 地址控件改变控件
  32. columnchange(d) {
  33. this.townList()
  34. },
  35. //传街道信息
  36. townPickerChange(e) {
  37. this.$emit('onTwonClick', this.array.town[this.value].name)
  38. },
  39. columnchange(d) {
  40. this.value = d.detail.value
  41. }
  42. },
  43. }
  44. </script>
  45. <style>
  46. </style>