基於vue2實現多級聯動選擇器

基於vue2.0實現的級聯選擇器

基於Vue的級聯選擇器，能夠單項，二級， 三級級聯，多級級聯

web開發中咱們常常會遇到級聯選擇器的問題，尤爲是在表單中,無外乎幾種狀況：

• 單個級聯 (下拉選擇框，單選)

• 單個級聯 (多項選擇)

• 二級聯動 （省份和城市聯動）

• 三級聯動 (省市區聯動)

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

本文探討一下在vue中的實現級聯選擇器，本身在項目中碰到過如下兩種狀況的後端數據,查閱資料後也證明了這兩種數據的合理性:

預覽地址

github地址

1 後端處理數據邏輯

這種狀況是比較推薦的，大量的數據運算放在後端來進行，只需先後端商量好數據格式便可

通常的數據格式可能以下：

[{
  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: '浦東'
  }]
}]

特色：數據之間層級嵌套，上下級的關係很清晰

2 前端處理數據邏輯

這種狀況適合數據量較小的數據，或者因爲某種緣由後端只能返給你這種數據，那全部的數據處理就須要前端來操做，最終拼成的格式也與上述狀況相似，只不過是多幾個或少幾個字段的問題。

數據格式可能會是這樣：

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

特色：數據格式是個平面表，每一條數據中都帶有與之相對應的上下級關係。當咱們查看某個數據的上下級時，都須要從新去遍歷一遍數據。

如何在組件中使用

<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

props	type	description
origanization	Array	級聯數據源，格式必須按照第一種數據中的格式顯示
value	Array	選中中或默認值,能夠直接用v-model語法糖，具體能夠查看例子

參考資料： Web中樹形數據(層級關係數據)的實現