vue三级市区联动

默认返回值格式：all:code、name都返回 name:只返回name code:只返回code，level：可设置显示层级 1： 省  2： 省、市 3： 省、市、区

v-model 默认值 可以是 name: [ "天津市", "天津市", "和平区" ] code: [ "120000", "120100", "120101" ]

all:[ { "code": "120000", "name": "天津市" }, { "code": "120100", "name": "天津市" }, { "code": "120101", "name": "和平区" } ]

1、数据来源  area-data
 

npm i -s area-data
 area-data 直辖市默认下级是市辖区 如：北京市->市辖区 若显示 北京市->北京市 需找到安装的包将数据里的市辖区改为相应的直辖市名称

2、自定义级联组件al-cascader.vue 

util.js

const util = {}
 
util.levelArr = [1, 2, 3]
 
util.oneOf = (item, arr) => {
  return arr.includes(item)
}
util.getIndex = (list, name) => {
  for (const i in list) {
    if (list[i] === name) return i
  }
}
 
util.dataType = ['all', 'code', 'name']
 
util.checkLevel = (val) => {
  return util.oneOf(val, util.levelArr)
}
 
export default util

 调用

import selectaddress from '@/views/huidu/sale/utils/addressselection'

注册

 components:{
      selectaddress
    },

使用

//下面放入需要引用的地方
//其中level的值是控制选择，3为三级就是选择省,市,区都会选择，1为选择省

              
            

//下面方法放入方法methods:里面
selectaddress(value){
        console.log("组件传给给父组件的值："+value);
        var address=value[0]+value[1]+value[2];
        var i=value[3];
        this.addressList[i-1].domicilePlaceProvince=address;
        console.log(this.addressList[i-1].domicilePlaceProvince);
      },