Picker 级联选择
省市县选择组件，需要提供省市县数据
使用指南
import { Picker } from 'fs-ui'
export default {
components: {
fsPicker: Picker
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
代码演示
基础用法
初始化一个picker组件，需要传入省市县三列的数据，数据格式可参考最下方
<fs-picker :show.sync="show" :data="currentData"/>
1
顶部栏标题
如果需要设置级联选择的标题，需要传入title属性
<fs-picker :show.sync="show" title="标题" :data="currentData"/>
1
默认值选中
如果想选中某个省市区，需要传入一个value属性，或使用v-model双向绑定显示
<fs-picker v-model="value" :show.sync="show" :data="currentData"/>
1
变形
选择年月
<fs-picker :show.sync="show4" :data="currentData4" title="请选择年月" @cancel="cancel" @confirm="confirm4" @change="requestAddress4"/>
1
export default {
data () {
return {
data1: [],
data2: [{
code: '420000',
name: '湖北省'
},
{
code: '420300',
name: '十堰市'
},
{
code: '420322',
name: '郧西县'
}],
data4: [{
name: '2008年',
value: 2008
}, {
name: '3月',
value: 3
}],
show1: false,
show2: false,
show3: false,
show4: false,
currentData1: [],
currentData2: [],
currentData4: []
}
},
methods: {
confirm1 (values) {
this.data1 = values
},
confirm2 (values) {
this.data2 = values
},
confirm4 (values) {
this.data4 = values
},
cancel () {
},
requestAddress4 (picker, values, index, first) {
let currentData4 = yearMonthData.map((item, key) => {
let defaultIndex = 0
const column = picker.childs[key]
// if (key > index) {
// column && column.setIndex(defaultIndex)
// }
const value = this.data4.length > key ? this.data4[key].value : ''
for (let i = 0; i < item.length; i++) {
if (+item[i].value === +value) {
defaultIndex = i
break
}
}
if (first) {
column && column.setIndex(defaultIndex)
}
return {
defaultIndex,
values: item
// className: `className${key}`
}
})
this.$set(this, 'currentData4', currentData4)
},
requestAddress1 (picker, values, index, first) {
this.requestAddress(picker, values, index, first, 1)
},
requestAddress2 (picker, values, index, first) {
this.requestAddress(picker, values, index, first, 2)
},
requestAddress (picker, values, index, first, num) {
let tempData = this[`data${num}`]
let tempCode = tempData && tempData.length ? tempData[tempData.length - 1].code : '110101'
let code = values && values.length > index ? values[index].code : '110101'
if (first) {
code = tempCode
}
let task = []
task.push(getListByCode('province', ''))
task.push(getListByCode('city', code.slice(0, 2)))
task.push(getListByCode('county', code.slice(0, 4)))
Promise.all(task).then(res => {
let county = res[2]
if (!county || !county.length) {
getListByCode('county', res[1][0].code.slice(0, 4)).then(data => {
res.splice(2, 1, data)
this.$set(this, `currentData${num}`, this.getFormatData(res, tempCode, first, num, picker, index))
})
} else {
this.$set(this, `currentData${num}`, this.getFormatData(res, tempCode, first, num, picker, index))
}
}).catch(err => console.log(err))
},
/**
* 格式化列数据
* @param {Array} result 当前选择的省市区
* @param {String} code 当前项的code
*/
getFormatData (result = [], code = '', first, num, picker, index) {
return result.map((item, key) => {
// 获取默认值
let defaultIndex = 0
const column = picker.childs[key]
if (key > index) {
column && column.setIndex(defaultIndex)
}
if (first) {
const compareNum = key === 0 ? 2 : key === 1 ? 4 : 6
for (let i = 0; i < item.length; i++) {
if (item[i].code.slice(0, compareNum) === code.slice(0, compareNum)) {
defaultIndex = i
break
}
}
column && column.setIndex(defaultIndex)
}
return {
defaultIndex,
values: item,
className: `className${key}`
}
})
}
}
}
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 当前省市县的代码 | String | - |
| show | 是否显示 | Boolean | false |
| data | 省市县数据列表 | Array | - |
| title | 顶部栏标题 | String | 选择地区 |
| value-key | 省市县数据的键值名 | String | name |
| item-height | 省市县列表行高度 | Number | 32 |
| visible-item-count | 列表可见的数据个数 | Number | 7 |
事件
| 事件 | 说明 | 返回值 |
|---|---|---|
| input | input 事件 | 当前省市县的代码code |
| confirm | 点击确定按钮触发 | 包含当前省市县数据的数组values |
| cancel | 点击取消按钮触发 | 包含当前省市县数据的数组values |
| change | 选择变化时触发 | Picker 实例、包含当前省市县数据的数组、当前变化项下标、当前省市县的代码code picker, values, columnIndex, code |
数据格式
[
{ values: [ /*省数据*/ ] },
{ values: [ /*市数据*/ ] },
{ values: [ /*县数据*/ ] }
]
// 省数据
[
{
name: '北京市',
code: '110000'
},
{
name: '天津市',
code: '120000'
}
...
]
// 市数据
[
{
name: '北京市',
code: '110100'
}
]
// 县数据
[
{
name: '东城区',
code: '110101'
},
{
name: '西城区',
code: '110102'
}
...
]
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
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