基于Vue的級(jí)聯(lián)選擇器，可以單項(xiàng)，二級(jí)， 三級(jí)級(jí)聯(lián)，多級(jí)級(jí)聯(lián)

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

單個(gè)級(jí)聯(lián) (下拉選擇框，單選) 單個(gè)級(jí)聯(lián) (多項(xiàng)選擇) 二級(jí)聯(lián)動(dòng) （省份和城市聯(lián)動(dòng)） 三級(jí)聯(lián)動(dòng) (省市區(qū)聯(lián)動(dòng))

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

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

預(yù)覽地址

github地址

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

這種情況是比較推薦的，大量的數(shù)據(jù)運(yùn)算放在后端來進(jìn)行，只需前后端商量好數(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: '浦東' }]}]

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

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

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

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

[{ 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: '長(zhǎng)沙市', 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}]

特點(diǎn)：數(shù)據(jù)格式是個(gè)平面表，每一條數(shù)據(jù)中都帶有與之相對(duì)應(yīng)的上下級(jí)關(guān)系。當(dāng)我們查看某個(gè)數(shù)據(jù)的上下級(jí)時(shí)，都需要重新去遍歷一遍數(shù)據(jù)。

如何在組件中使用