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

而立發表於2017-06-09
Vue

基於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中樹形資料(層級關係資料)的實現

相關文章