如何使用vue2.0实现级联选择器

小编给大家分享一下如何使用vue2.0实现级联选择器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

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

1. 单个级联 (下拉选择框，单选)

2. 单个级联 (多项选择)

3. 二级联动 （省份和城市联动）

4. 三级联动 (省市区联动)

在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

看完了这篇文章，相信你对“如何使用vue2.0实现级联选择器”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！