基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联

web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况：

1. 单个级联 (下拉选择框，单选)
2. 单个级联 (多项选择)
3. 二级联动 （省份和城市联动）
4. 三级联动 (省市区联动)

在jquery中有很多好用的插件，比如select2,单选，多选的功能都具备。

本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性:

预览地址

github地址

1 后端处理数据逻辑

这种情况是比较推荐的，大量的数据运算放在后端来进行，只需前后端商量好数据格式即可

一般的数据格式可能如下：

特点：数据之间层级嵌套，上下级的关系很清晰

2 前端处理数据逻辑

这种情况适合数据量较小的数据，或者由于某种原因后端只能返给你这种数据，那所有的数据处理就需要前端来操作，最终拼成的格式也与上述情况类似，只不过是多几个或少几个字段的问题。

数据格式可能会是这样：

特点：数据格式是个平面表，每一条数据中都带有与之相对应的上下级关系。当我们查看某个数据的上下级时，都需要重新去遍历一遍数据。

如何在组件中使用

@H_403_52@
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
}
}