vant 省市区三级联动 自定义json数据展示 取值
时间:2020-05-30
本文章向大家介绍vant 省市区三级联动 自定义json数据展示 取值,主要包括vant 省市区三级联动 自定义json数据展示 取值使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
{"code":"110000","name":"北京市"}
{"code":"110100","name":"北京市","parent_code":"110000"}
{"code":"110101","name":"东城区","parent_code":"110100"}
json文件中的省市区都是这种格式
而vant 的组件规定这种格式
我将json数据拼接字符串 完成页面效果
created() {
//导入json 文件 let provinces = require("../../static/json/provinces.json"); let cities = require("../../static/json/cities.json"); let areas = require("../../static/json/areas.json"); //拼接省 let str = "{"; provinces.forEach((item) => { str = str + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ","; }); let provinceStr = str.substring(0, str.length - 1) + "}"; let province = JSON.parse(provinceStr); //拼接市 let str1 = "{"; cities.forEach((item) => { str1 = str1 + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ","; }); let citiesStr = str1.substring(0, str1.length - 1) + "}"; let cityse = JSON.parse(citiesStr); //拼接区 let str2 = "{"; areas.forEach((item) => { str2 = str2 + '"' + item.code + '"' + ":" + '"' + item.name + '"' + ","; }); let areasStr = str2.substring(0, str2.length - 1) + "}"; let areasse = JSON.parse(areasStr); //最后将值赋给 对象 this.areaList.province_list = province; this.areaList.city_list = cityse; this.areaList.county_list = areasse; console.log(this.areaList); },
这样页面就展示出来了
取值通过它自带的方法
onConfirm(values) { this.value = values.map((item) => item.name).join("/"); console.log(values[0].code); console.log(values[1].code); console.log(values[2].code); this.showArea = false; },
打印出来对应的code
好了,这样就实现了。当时真的好烧脑,多亏我同事帮助,非常感谢。希望本篇文章能帮到你。
我是金陵彭于晏我们下期再见!
原文地址:https://www.cnblogs.com/lq2333/p/12993645.html
- 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 数组属性和方法
- python爬虫-首医
- 2万8千张图片如何用python组成一张(简洁明了附源码)
- 10 种常用 Matplotlib 图的 Python 代码
- Python爬取某宝商品数据案例:100页的价格、购买人数等数据
- 如何让你的图片加上一层天气的特效?Python帮你解决(附源码)
- Python最简单的图片爬虫,20行代码带你爬遍整个网站
- 用Python把人物头像动漫化,不同的表情给你不同的惊喜
- python苦短-爬取音乐
- python苦短-灵笼说啥
- python爬虫-八佰词云
- python爬虫-beautifulsoup使用
- 深度学习-卷积神经网络原理
- 深度理论VGG-NET 网络
- 只要30行代码!7步教会你Python爬取网页抖音热门视频
- python苦短-CV2