vue怎么实现级联选择器

本篇内容主要讲解“Vue怎么实现级联选择器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现级联选择器”吧!

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

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

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

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

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

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

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

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

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

到此，相信大家对“vue怎么实现级联选择器”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！