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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

参考：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

以上是 abp框架vue.js使用vue-area-linkage省市区级联选择以及省市区sql数据下载 的全部内容， 来源链接： utcz.com/z/378418.html

回到顶部