基于vue2实现多级联动选择器

内容简介：基于vue2实现多级联动选择器

基于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中树形数据(层级关系数据)的实现

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 简单实现ajax三级联动效果
• Ajax+Servlet实现无刷新下拉联动效果
• NFV+SDN云网联动实现VNF全自动化部署
• 小程序滚动组件，左边导航栏与右边内容联动效果实现
• VUE2 前端实现 静态二级省市联动选择select的示例
• jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。