vue怎么實(shí)現(xiàn)級(jí)聯(lián)選擇器

本篇內(nèi)容主要講解“vue怎么實(shí)現(xiàn)級(jí)聯(lián)選擇器”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue怎么實(shí)現(xiàn)級(jí)聯(lián)選擇器”吧!

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

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

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

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

3. 二級(jí)聯(lián)動(dòng) （省份和城市聯(lián)動(dòng)）

4. 三級(jí)聯(lián)動(dòng) (省市區(qū)聯(lián)動(dòng))

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

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

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

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

[{
 value: 'beijing',
 label: '北京',
 children: [{
  value: 'chaoyang',
  label: '朝陽(yáng)'
 }, {
  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ù)處理就需要前端來(lái)操作，最終拼成的格式也與上述情況類似，只不過(guò)是多幾個(gè)或少幾個(gè)字段的問(wèn)題。

數(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: '漢陽(yáng)區(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ù)。

如何在組件中使用

<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

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

到此，相信大家對(duì)“vue怎么實(shí)現(xiàn)級(jí)聯(lián)選擇器”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！