小編給大家分享一下如何使用vue2.0實現(xiàn)級聯(lián)選擇器，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務，在本地打下了良好的口碑，在過去的10年時間我們累計服務了上千家以及全國政企客戶，如成都濕噴機等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質量監(jiān)控加上過硬的技術實力獲得客戶的一致贊譽。

?基于Vue的級聯(lián)選擇器，可以單項，二級， 三級級聯(lián)，多級級聯(lián)

web開發(fā)中我們經(jīng)常會遇到級聯(lián)選擇器的問題，尤其是在表單中,無外乎幾種情況：

1. 單個級聯(lián) (下拉選擇框，單選)

2. 單個級聯(lián) (多項選擇)

3. 二級聯(lián)動 （省份和城市聯(lián)動）

4. 三級聯(lián)動 (省市區(qū)聯(lián)動)

在jquery中有很多好用的插件，比如select2, 單選，多選的功能都具備。

本文探討一下在vue中的實現(xiàn)級聯(lián)選擇器，自己在項目中碰到過以下兩種情況的后端數(shù)據(jù),查閱資料后也證實了這兩種數(shù)據(jù)的合理性:

預覽地址

github地址

1 后端處理數(shù)據(jù)邏輯

這種情況是比較推薦的，大量的數(shù)據(jù)運算放在后端來進行，只需前后端商量好數(shù)據(jù)格式即可

一般的數(shù)據(jù)格式可能如下：

[{
 value: 'beijing',
 label: '北京',
 children: [{
  value: 'chaoyang',
  label: '朝陽'
 }, {
  value: 'haidian',
  label: '海淀'
 }, {
  value: 'changping',
  label: '昌平'
 }, {
  value: 'shunyi',
  label: '順義'
 }]
}, {
 value: 'shanghai',
 label: '上海',
 children: [{
  value: 'baoshan',
  label: '寶山'
 }, {
  value: 'jiading',
  label: '嘉定'
 }, {
  value: 'songjiang',
  label: '松江'
 }, {
  value: 'pudong',
  label: '浦東'
 }]
}]

特點：數(shù)據(jù)之間層級嵌套，上下級的關系很清晰

2 前端處理數(shù)據(jù)邏輯

這種情況適合數(shù)據(jù)量較小的數(shù)據(jù)，或者由于某種原因后端只能返給你這種數(shù)據(jù)，那所有的數(shù)據(jù)處理就需要前端來操作，最終拼成的格式也與上述情況類似，只不過是多幾個或少幾個字段的問題。

數(shù)據(jù)格式可能會是這樣：

[{
 code: 420000,
 name: '湖北省',
 parentCode: 0
},
{
 code: 420100,
 name: '武漢市',
 parentCode: 420000
},
{
 code: 420101,
 name: '市轄區(qū)',
 parentCode: 420100
},
{
 code: 420102,
 name: '江岸區(qū)',
 parentCode: 420100
},
{
 code: 420103,
 name: '江漢區(qū)',
 parentCode: 420100
},
{
 code: 420104,
 name: '硚口區(qū)',
 parentCode: 420100
},
{
 code: 420105,
 name: '漢陽區(qū)',
 parentCode: 420100
},
{
 code: 421000,
 name: '荊州市',
 parentCode: 420000
},
{
 code: 421001,
 name: '市轄區(qū)',
 parentCode: 421000
},
{
 code: 421002,
 name: '沙市區(qū)',
 parentCode: 421000
},
{
 code: 421003,
 name: '荊州區(qū)',
 parentCode: 421000
},
{
 code: 430000,
 name: '湖南省',
 parentCode: 0
},
{
 code: 430100,
 name: '長沙市',
 parentCode: 430000
},
{
 code: 430101,
 name: '市轄區(qū)',
 parentCode: 430100
},
{
 code: 430102,
 name: '芙蓉區(qū)',
 parentCode: 430100
},
{
 code: 430103,
 name: '天心區(qū)',
 parentCode: 430100
},
{
 code: 430104,
 name: '岳麓區(qū)',
 parentCode: 430100
}]

特點：數(shù)據(jù)格式是個平面表，每一條數(shù)據(jù)中都帶有與之相對應的上下級關系。當我們查看某個數(shù)據(jù)的上下級時，都需要重新去遍歷一遍數(shù)據(jù)。

如何在組件中使用