vue中使用vant-UI实现移动端自定义省市区三级联动
时间:2019-11-16
本文章向大家介绍vue中使用vant-UI实现移动端自定义省市区三级联动,主要包括vue中使用vant-UI实现移动端自定义省市区三级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近项目中需要用到省市区联动,ui用的是有赞的Vant-UI
看了一下文档,UI中已经给我们提供了一个写好的省市区联动组件,如果没有特殊需求的话可以直接使用:
但是这个组件的架构和项目中的需求有一些出入——项目中所需的行政区标识code使用的不是标准行政区六位代码,是自定义的标识,需要从后台请求拿到。
以下是使用vant的Picker组件重写省市区联动的代码:
h5:
<van-popup v-model="cityVisable" position="bottom"> //Picker一般结合遮罩层使用
<van-picker
show-toolbar //显示上方取消和完成按钮
title="请选择地区" //自定义标题栏内容
value-key="name" //自定义Picker滚动条中显示的文字(因为Picker中的每一项都是一个json)
:columns="areaList" //Picker的数据
@change="onAreaChange" //当Picker选中项改变时触发
@cancel="onCancel" //当点击取消按钮时触发
@confirm="onAreaConfirm" //当点击完成按钮时触发
/>
</van-popup>
js:
data() {
return {
cityVisable: false, //遮罩层显示或隐藏
areaList: [{values: []}, {values: []}, {values: []}], //自定义数据三级结构
checkCity: '' //Picker拿到的值
}
},
mounted: {
this.getArea('',0); //渲染页面时请求第一层省级数据
},
methods: {
//网络请求地区数据(难点在如何拼装三级结构)
getArea(ParentId, index) {
const options = {ParentId};
this.$Api.GetQuotationAreeaByParentAreaId(options, res => { //网络请求封装,post请求,参数是ParentId
if (res.ret === '0') { //当请求成功时
const {regionList} = res.data;
this.areaList[index].values = [
{name: '请选择'},
...regionList //ES6新语法
];
if (index < 2) { //当请求的是三级内的内容时
this.areaList[index + 1].values = [];
}
this.areaList = [...this.areaList]; //更新areaList
} else {
this.$notify(res.msg);
}
})
},
//当地区选择变化时
onAreaChange(picker, values, index) {
if (index < 2) {
this.getArea(values[index].code, index + 1); //传参 参数为上层选择的地区的code
}
},
//点击取消
onCancel() {
this.cityVisable = false;
},
//点击确定
onAreaConfirm(value) {
if (value[2] && value[2].code) {
this.checkCity = value[2];
} else if (value[1] && value[1].code) {
this.checkCity = value[1];
} else if (value[0] && value[0].code) {
this.checkCity = value[0];
} else {
this.checkCity = null;
}
this.cityVisable = false;
}
}
网络请求返回的结构:
请求的参数:使用code字段的值就可以
{
"ret": "0",
"data": {
"regionList": [
{
"name": "北京市",
"code": "110000000000",
"parentCode": "000000000000"
},
{
"name": "天津市",
"code": "120000000000",
"parentCode": "000000000000"
},
]
},
"msg":null
}
预览图:
原文地址:https://www.cnblogs.com/lzb1234/p/11871424.html
- 用惯了ORM,居然不会写分页SQL了
- OC学习14——谓词
- 如何在32位系统中使用ROP+Return-to-dl来绕过ASLR+DEP
- 如何使用Twitter构建C;C服务器
- 【Python语言】Scikit-learn 快速入门
- 抽象SQL查询:SQL-MAP技术的使用
- 简析60度CMS的Cookies欺骗漏洞
- OC学习13——Foundation框架中的集合
- 如何成为一个伟大的前端工程师
- 花生壳黑吃黑之一:Web练手基地
- OC学习12——字符串、日期、日历
- OpenStack:建立虚拟的渗透测试实验环境 – 安装篇
- OC学习10——内存管理
- 使用CefSharp开发一个12306“安心刷票弹窗通知”工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法