Linkage 级联选择
使用指南
import { Linkage } from 'fs-ui'
export default {
components: {
Linkage
}
}
1
2
3
4
5
6
2
3
4
5
6
代码演示
选择地区
<fs-linkage
:data="currentData1"
text-key="title"
value:key="code"
:columns-num="2"
v-model="address1"
:show.sync="show1"
@change-select="requestAddress1">
</fs-linkage>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
带初始值
<fs-linkage
:data="currentData2"
v-model="address2"
:show.sync="show2"
@change-select="requestAddress2">
</fs-linkage>
1
2
3
4
5
6
2
3
4
5
6
let mockData = (len) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
let province = [{
title: '吉林省',
id: 1,
code: '110000'
}, {
title: '湖北省',
id: 2,
code: '120000'
}, {
title: '浙江省',
id: 3,
code: '130000'
}, {
title: '甘肃省',
id: 4,
code: '140000'
}, {
title: '海南省',
id: 5,
code: '150000'
}, {
title: '湖南',
id: 6,
code: '160000'
}, {
title: '黑龙江',
id: 7,
code: '170000'
}, {
title: '新疆',
id: 8,
code: '180000'
}, {
title: '西藏',
id: 9,
code: '190000'
}, {
title: '青海省',
id: 10,
code: '200000'
}, {
title: '广东省',
id: 11,
code: '210000'
}, {
title: '广西省',
id: 12,
code: '220000'
}, {
title: '安徽省',
id: 13,
code: '230000'
}, {
title: '辽宁省',
id: 14,
code: '240000'
}, {
title: '河北省',
id: 15,
code: '250000'
}]
let city = [{
title: '长春市',
code: '100100'
}, {
title: '武汉市',
code: '110100'
}, {
title: '天水市',
code: '120100'
}, {
title: '杭州市',
code: '120100'
}, {
title: '兰州市',
code: '140100'
}]
let country = [{
title: '九台区',
code: '100101'
}, {
title: '泗水县',
code: '110101'
}, {
title: '黄梅县',
code: '120101'
}, {
title: '西湖区',
code: '130101'
}, {
title: '余杭区',
code: '140101'
}]
len === 0 && resolve(province)
len === 1 && resolve(city)
len === 2 && resolve(country)
len === 3 && resolve([])
}, 1000)
})
}
export default {
data () {
return {
address1: [], // 当前选择的数据
address2: [{
id: '220000',
title: '吉林省'
}, {
id: '220100',
title: '长春市'
}, {
id: '220113',
title: '九台区'
}], // 当前选择的数据
currentData1: [], // 当前获取的数据
currentData2: [], // 当前获取的数据
show1: false, // 是否显示
show2: false // 是否显示
}
},
computed: {
formatAddress1 () {
return this.address1 && this.address1.length ? this.address1.map(v => v.title).join('/') : ''
},
formatAddress2 () {
return this.address2 && this.address2.length ? this.address2.map(v => v.title).join('/') : ''
}
},
methods: {
/**
* 根据当前地址获取下一个地址数据
*/
requestAddress1 ({ len, id }) {
mockData(parseInt(len)).then(data => {
this.currentData1 = data
})
},
requestAddress2 ({ len, id }) {
mockData(parseInt(len)).then(data => {
this.currentData2 = data
})
}
}
}
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 当前选择的值数组 | ||
| data | 当前获取的数据 | Array | [] |
| show | 是否显示弹框 | Boolean | false |
| text-key | 数据中文本对应的字段名 | String | name |
| value-key | 数据中值对应的字段名 | String | code |
| columns-num | 显示最大列数，3-省市区，2-省市，1-省 | String | Number | 3 |
事件
| 事件 | 说明 |
|---|---|
| change-select | show变化时、数值变化时调用，在这个事件中获取数据源 |
获取源数据示例
requestAddress ({ len, id }) {
axios.post('/get-city-json', `type=${len}&code=${id}`).then(res => {
this.currentData = res.data
})
}
1
2
3
4
5
2
3
4
5
数据格式
[{
city: '0',
code: '11000',
id: '1',
level: '0',
name: '北京',
province: '0'
},
// ...
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10