abp框架vue.js使用vue-area-linkage省市区级联选择以及省市区sql数据下载

参考：https://www.jianshu.com/p/1e6eabae736b

https://github.com/dwqs/vue-area-linkage

1、安装：建议安装v5及之后的版本

npm i --save vue-area-linkage area-data 或者 yarn add vue-area-linkage area-data

2、在mian.js里面注册

import VueAreaLinkage from 'vue-area-linkage';

import 'vue-area-linkage/dist/index.css';

Vue.use(VueAreaLinkage);

3、然后再具体使用的页面引入

import { AreaCascader } from "vue-area-linkage"

import { pca, pcaa } from 'area-data';

页面注册组件

@Component({

components: { AreaCascader },

})

4、在页面中定义data

//数组对应的就是选中的那个省市区。根据type来确定是省市区汉字的数组还是编码组成的数组。

//selected[0]省。selected[1]市。selected[2]区。

selected: [],

pca: pca,

pcaa: pcaa

5、用法

使用area-select 来写

<area-select v-model="selected" :data="pca"></area-select> // 省市

<area-select v-model="selected" :data="pcaa"></area-select>// 省市区

使用area-cascader 来写

<area-cascader v-model="selected" :data="pca"></area-cascader> // 省市

<area-cascader v-model="selected" :data="pcaa"></area-cascader>// 省市区

我写的<area-cascader type="all" v-model="selected" :level="1" :data="pcaa"></area-cascader>

ABP/Vue实际代码：

初始化

created() {
    let editModel = null;
    if (this.$store.state.product.editProduct) {
      editModel = this.$store.state.product.editProduct;
    }
    this.formModel = Util.extend(true, {}, editModel);
    let regions = [
      this.formModel.provinceId.toString(),
      this.formModel.cityId.toString(),
      this.formModel.areaId.toString()
    ];
    this.selected = regions;
  }

保存数据的时候

if (this.selected != undefined) {
          let provinceRegionId = Object.keys(this.selected[0])[0];
          let cityRegionId = Object.keys(this.selected[1])[0];
          let areaRegionId = Object.keys(this.selected[2])[0];
          let regionJson = JSON.stringify(this.selected);

          this.formModel.provinceId = parseInt(provinceRegionId);
          this.formModel.cityId = parseInt(cityRegionId);
          this.formModel.areaId = parseInt(areaRegionId);
          this.formModel.regionJson = regionJson;
        }

省市区数据sql语句下载：https://pan.baidu.com/s/1HPXiyQDp_my4oASje9zIsw，提取码：umxs