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

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

單個(gè)級聯(lián) (下拉選擇框，單選)

單個(gè)級聯(lián) (多項(xiàng)選擇)

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

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

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

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

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ù)之間層級嵌套，上下級的關(guān)系很清晰

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

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

數(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 }]

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

如何在組件中使用

<div class="hello"> <form-organization :organization="organization" v-model="seleted"></form-organization> </div> <script> import FormOrganization from '@/components/FormOrganization' export default { name: 'hello', data () { return { seleted: [], organization: [{ value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' }, { value: 'shenzhen', label: '深圳' }, { value: 'hangzhou', label: '杭州' }, { value: 'zhengzhou', label: '鄭州' }, { value: 'guangzhou', label: '廣州' }, { value: 'xiamen', label: '廈門' }] } }, components: { FormOrganization } } </script>

API