vue里面的省市区三级联动vue-area-linkage,设置初始值和把修改的值传给后台。为什么编辑的时候显示的还是第一赋值的。如何修改

vue-area-linkage

点这里看demo:https://dwqs.github.io/vue-area-linkage/

安装

这里安装v5之后的版本  

npm i --save vue-area-linkage area-data

 

在mian.js里面注册

import VueAreaLinkage from 'vue-area-linkage';

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

Vue.use(VueAreaLinkage);

 

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

    import { AreaCascader } from "vue-area-linkage"
    import { pca, pcaa } from 'area-data';

 

同时data数据中定义

selected: [], //数组对应的就是选中的那个省市区。根据type来确定是省市区汉字的数组还是编码组成的数组。
              //selected[0]省。selected[1]市。selected[2]区。
pca: pca,
pcaa: pcaa

使用,可以选择两种方式来写都行。

1,使用area-select 来写
<area-select v-model="selected" :data="pca"></area
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
首先,你需要在vue2项目中安装`j-area-linkage`组件库,可以通过以下命令进行安装: ``` npm install j-area-linkage --save ``` 然后在你的Vue组件中引入该组件: ``` <template> <div> <j-area-linkage :province="province" :city="city" :district="district" :provinceList="provinceList" :cityList="cityList" :districtList="districtList" @provinceChange="provinceChange" @cityChange="cityChange" @districtChange="districtChange" ></j-area-linkage> </div> </template> <script> import JAreaLinkage from 'j-area-linkage'; export default { name: 'MyComponent', components: { JAreaLinkage, }, data() { return { province: '', city: '', district: '', provinceList: [], cityList: [], districtList: [], }; }, created() { // 在data.js中获取省市区数据 // 省份列表 this.provinceList = data.provinceList; // 城市列表 this.cityList = data.cityList; // 区县列表 this.districtList = data.districtList; }, methods: { // 省份选择回调 provinceChange(province) { this.province = province; // 根据省份获取城市列表 this.cityList = data.getCityListByProvince(province); // 清空城市和区县 this.city = ''; this.district = ''; }, // 城市选择回调 cityChange(city) { this.city = city; // 根据城市获取区县列表 this.districtList = data.getDistrictListByCity(city); // 清空区县 this.district = ''; }, // 区县选择回调 districtChange(district) { this.district = district; }, }, }; </script> ``` 在上述代码中,我们通过引入`j-area-linkage`组件,并在`data`中获取省市区数据。然后在`template`中使用`j-area-linkage`组件,通过绑定`province`、`city`、`district`等属性和相应的回调函数来实现省市区三级联动。 注意,`data.js`文件中需要提供以下三个方法: - `getCityListByProvince(province)`:根据省份获取城市列表 - `getDistrictListByCity(city)`:根据城市获取区县列表 - `provinceList`:省份列表 - `cityList`:城市列表 - `districtList`:区县列表 你需要根据你的实际情况来实现这些方法。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值