怎么使用vue2.0实现级联选择器

怎么使用vue2.0实现级联选择器

这篇“怎么使用vue2.0实现级联选择器”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用vue2.0实现级联选择器”文章吧。

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实现级联选择器”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[