1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <template>
| <picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector">
| <slot></slot>
| </picker>
| </template>
|
| <script>
| import AllAddress from '@/js/pickerAddress/data.js'
| let selectVal = ['','','']
|
| export default {
| data() {
| return{
| value: [0,0,0],
| array: [],
| index: 0
| }
| },
| created() {
| this.initSelect()
| },
| methods:{
| // 初始化地址选项
| initSelect() {
| this.updateSourceDate() // 更新源数据
| .updateAddressDate() // 更新结果数据
| .$forceUpdate() // 触发双向绑定
| },
| // 地址控件改变控件
| columnchange(d) {
| this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
| .updateSourceDate() // 更新源数据
| .updateAddressDate() // 更新结果数据
| .$forceUpdate() // 触发双向绑定
| },
|
| /**
| * 更新源数据
| * */
| updateSourceDate() {
| this.array = []
| this.array[0] = AllAddress.map(obj => {
| return {
| name: obj.name
| }
| })
| this.array[1] = AllAddress[this.value[0]].city.map(obj => {
| return {
| name: obj.name
| }
| })
| this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
| return {
| name: obj
| }
| })
| return this
| },
|
| /**
| * 更新索引
| * */
| updateSelectIndex(column, value){
| let arr = JSON.parse(JSON.stringify(this.value))
| arr[column] = value
| if(column === 0 ) {
| arr[1] = 0
| arr[2] = 0
| }
| if(column === 1 ) {
| arr[2] = 0
| }
| this.value = arr
| return this
| },
|
| /**
| * 更新结果数据
| * */
| updateAddressDate() {
| selectVal[0] = this.array[0][this.value[0]].name
| selectVal[1] = this.array[1][this.value[1]].name
| selectVal[2] = this.array[2][this.value[2]].name
| return this
| },
|
| /**
| * 点击确定
| * */
| bindPickerChange(e) {
| // console.log(e);
| this.$emit('change', {
| target: e.target,
| data: selectVal
| })
| return this
| }
|
| }
| }
| </script>
|
| <style>
| </style>
|
|
