Vue实现省、市、县三级联动

新入职的公司让我学习下Vue，以前没怎么学过，最近开始学习，记录下每天学习的内容，借鉴了很多前辈们的资料，如有冒犯，还请原谅。
**官方文档：**https://distpicker.pigjian.com/
官方文档写的很详细，有兴趣的可以看一下，嗯~~，英文的。
先看看效果：

再说下步骤：
1、先安装插件：npm install v-distpicker --save，几分钟就下载好了。
2、所有代码

<template>
<v-distpicker v-show="true" :province="pcd.province" :city="pcd.city" :area="pcd.dist" @selected="pcdSelect"></v-distpicker>
</template>
<script>import VDistpicker from 'v-distpicker'export default {components: { VDistpicker },data(){return{pcd: {province: '',city: '',dist: '',}},methods:{pcdSelect(data) {this.pcd.province = data.province.valuethis.pcd.city = data.city.valuethis.pcd.dist = data.area.value
}}}}
</script>

Vue实现省、市、县三级联动相关推荐

省市县三级联动
大纲一.导入省市县数据表(t_region) 二.引入jar包三.导入所需util类(整体框架) 四.编写代码 1.配置数据库相关信息(数据库名.用户名.密码) config.propr ...
iOS增强版的UIDatePicker，省市县三级联动地址选择器（ActionSheetCustomPicker）
一般的项目中都会有一个选择地址的需求,系统的UIDatePicker肯定是不够的,找了个比较好用的库 ActionSheetCustomPicker github地址:ActionSheetCusto ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
[Python] PyQt5+Pycharm 实现省、市、区/县三级联动效果
Pyhton版本3.6 联动效果由三个py文件组成:一个是ui界面.一个逻辑脚本和省.市.区/县的信息文件. 先放上省.市.区/县的信息文件. #!usr/bin/env python # -*-co ...
国家统计局2020年6月30日最新省/市/县三级json数据（不包含港澳台）
目录国家统计局2020年最新省/市/县json数据(不包含港澳台) 全部数据数据说明获取省级数据获取市级数据获取县级数据国家统计局2020年最新省/市/县json数据(不包含港澳台) 国家 ...
【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显
目录一:准备工作二:json文件数据例1 例2 三:先做个按钮做弹窗显示四:使用组件五:用到的变量六:初始化数据七:数据变更时的方法八:点击确认时的方法九:数据的回填这是选中效果 ...
uniapp 用 uView 组件库中的u-picker 实现地区的省-市-区三级联动
组件的引入就不多赘述了直接看使用方法地址我是引入的json文件数据结构大概是这个样子例1 例2 1,先做个按钮做弹窗显示 <u-cell :border="true" ...

Vue实现省、市、县三级联动

Vue实现省、市、县三级联动相关推荐

最新文章

热门文章