uni-app封装省市区下拉组件(后台获取数据)

一.后台数据格式

 PROCINCE:[{itemName:'',itemValue:''}]

CITY:[{itemName:'',itemValue}]

AREA:[{itemName:'',itemValue}]

前端将地址数据缓存在了pinia中

前端主要使用picker进行勾选

二.代码

<template><picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="pickerIndex"mode="multiSelector"><slot></slot></picker>
</template><script>
import { glPinia } from '@/pinia/index';
import { sysDictList } from '@/api/glApi';
import { getDictCacheKey } from "@/config/dictCacheKey";
const _glPinia = glPinia();
let provinceData = _glPinia.dictsData.PROCINCE;
let cityData = _glPinia.dictsData.CITY;
let areaData = _glPinia.dictsData.AREA;export default {data() {return {array: [],pickerIndex: [0, 0, 0],value: [],	//由外部事件传入的值comType: 'normal'	//当前组件是初始状态还是修改状态};},created() {},methods: {//整个事件的起点,由外部事件调用initSelect(value) {this.value = value;if (!provinceData) {let dictsArr = getDictCacheKey();sysDictList(dictsArr).then(res => {if (res.code == 200) {_glPinia.setDictsData(res.data);provinceData = _glPinia.dictsData.PROCINCE;cityData = _glPinia.dictsData.CITY;areaData = _glPinia.dictsData.AREA;this.startPageEvent(value);}})} else {this.startPageEvent(value);}},startPageEvent(value) {if (Array.isArray(value) && value.length == 3 && value[0].length == 6) {this.comType = 'edit';} else {this.comType = 'normal';}let provinceCode = this.setProvinceData();let cityCode = this.setCityData(provinceCode, 'original');this.setAreaData(cityCode, 'original');},bindPickerChange(selectInfo) {let _index = selectInfo.detail.value;let forData = [0, 1, 2];let data = [];let code = [];forData.forEach(item => {code.push(this.array[item][_index[item]].value);data.push(this.array[item][_index[item]].name);})this.$emit('changeAddress', {data,code});},//列改变columnchange(columnInfo) {let _index = columnInfo.detail.value;let _column = columnInfo.detail.column;//省改变if (_column == 0) {this.pickerIndex[0] = _index;let provinceCode = this.array[0][_index].value.substr(0, 2);let cityCode = this.setCityData(provinceCode, 'select');this.setAreaData(cityCode, 'select');}//市改变if (_column == 1) {this.pickerIndex[1] = _index;let cityCode = this.array[1][_index].value.substr(0, 4);this.setAreaData(cityCode, 'select');}//区改变if (_column == 2) {this.pickerIndex[2] = _index;}},//设置省数据setProvinceData() {let _index;this.array[0] = provinceData.map(item => {return {name: item.itemName,value: item.itemValue}})if (this.comType == 'edit') {_index = this.array[0].findIndex(item => {return item.value == this.value[0];})this.pickerIndex[0] = _index;} else {this.pickerIndex[0] = 0;}return this.array[0][this.pickerIndex[0]].value.substr(0, 2);},//设置市数据,type区分是初始状态还是修改状态setCityData(provinceCode, type) {let _index, _data;_data = cityData.filter(item => {return item.itemValue.substr(0, 2) == provinceCode;})this.array[1] = _data.map(item => {return {name: item.itemName,value: item.itemValue}})if (type == 'original') {if (this.comType == 'edit') {_index = this.array[1].findIndex(item => {return item.value == this.value[1];})this.pickerIndex[1] = _index;} else {this.pickerIndex[1] = 0;}} else {this.pickerIndex[1] = 0;}return this.array[1][this.pickerIndex[1]].value.substr(0, 4);},//设置区数据,type区分是初始状态还是修改状态setAreaData(cityCode, type) {let _index, _data;_data = areaData.filter(item => {return item.itemValue.substr(0, 4) == cityCode;})this.array[2] = _data.map(item => {return {name: item.itemName,value: item.itemValue}})if (type == 'original') {if (this.comType == 'edit') {_index = this.array[2].findIndex(item => {return item.value == this.value[2];})this.pickerIndex[2] = _index;} else {this.pickerIndex[2] = 0;}} else {this.pickerIndex[2] = 0;}},}
};
</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV中常用的函数

OpenCV是一个功能强大的计算机视觉库&#xff0c;提供了众多用于图像处理、计算机视觉和机器学习的函数和模块。以下是一些OpenCV中常用的函数和模块的子集&#xff1a; 图像读取和显示&#xff1a; cv::imread&#xff1a;用于读取图像文件。cv::imshow&#xff1a;用于显示图…

Web安全测试(二):HTTP状态码、响应和url详解

一、前言 结合内部资料,与安全渗透部门同事合力整理的安全测试相关资料教程,全方位涵盖电商、支付、金融、网络、数据库等领域的安全测试,覆盖Web、APP、中间件、内外网、Linux、Windows多个平台。学完后一定能成为安全大佬! 全部文章请访问专栏:《全栈安全测试教程(0基…

jdk 04 stream的collect方法

01.收集(collect) collect&#xff0c;收集&#xff0c;可以说是内容最繁多、功能最丰富的部分了。 从字面上去理解&#xff0c;就是把一个流收集起来&#xff0c;最终可以是收集成一个值也可以收集成一个新的集合。 collect主要依赖java.util.stream.Collectors类内置的静态方…

七大出海赛道解读,亚马逊云科技为行业客户量身打造解决方案

伴随全球化带来的新机遇和国内市场的进一步趋于饱和&#xff0c;近几年&#xff0c;中国企业出海快速升温&#xff0c;成为了新的创业风口和企业的第二增长曲线。从范围上看&#xff0c;出海市场由近及远&#xff0c;逐步扩张。从传统的东南亚市场&#xff0c;到成熟的北美、欧…

DB2的系统数据表空间,用户数据表空间,系统临时表空间,用户临时表空间详解

可以参考DB2 information center的官方文档&#xff1a;https://www.ibm.com/docs/zh/db2/10.5?topicspaces-table-system-user-temporary-data 每个数据库都必须要有最小的一组表空间&#xff0c;这些表空间用于存储系统数据、用户数据和临时数据。 一个数据库至少必须包含三…

丰田中国vs中国丰田:一次历史性的战略探讨

比亚迪、长城、奇瑞等中国汽车品牌表现优异&#xff0c;让原本处于领先地位的日系、美系、德系等合资品牌面临压力&#xff0c;市场份额遭受前所未有的全新挑战。 东风雷诺、广汽菲克、广汽讴歌等逐渐退出中国市场&#xff0c;丰田也面临销售下滑。在中国汽车市场全新竞争格局下…

Qt跨平台无边框窗口探索记录

一、前言 实现的效果为&#xff1a;通过黑色矩形框预操作&#xff0c;鼠标释放时更新窗口。效果图如下&#xff1a; 1.功能 1.1 已实现功能 8个方向的缩放标题栏拖动标题栏双击最大化/正常窗口窗口最小尺寸预操作框颜色与背景色互补多屏幕默认标题栏 1.2 待开发功能 拖动到…

SQL-Injection

文章目录 引入columns表tables表schemata表以sqli-labs靶场为例路径获取常见方法文件读取函数文件写入函数防注入 数字型注入(post)字符型注入(get)搜索型注入xx型注入 引入 在MYSQL5.0以上版本中&#xff0c;mysql存在一个自带数据库名为information_schema,它是一个存储记录…

macOS - 上编译运行 risc-v (spike)

文章目录 一、说明二、安装步骤三、测试 一、说明 本文根据以下文章改编&#xff1a; RISC-V 环境配置 https://decaf-lang.github.io/minidecaf-tutorial/docs/step0/riscv_env.html 相关链接&#xff1a; riscv-gnu-toolchain GNU toolchain for RISC-V, including GCC ht…

YOLOV1

YOU ONLY LOOK ONCE

常见设计模式学习+面试总结

一 设计模式简介 二 面试总结 1 什么是单例模式&#xff1f;都有哪些地方用到单例&#xff1f; 内存中只会创建且仅创建一次对象的设计模式&#xff0c;保证一个类只有一个实例&#xff0c;并且提供一个访问该全局访问点。 应用场景&#xff1a; 网站的计数器&#xff0c;一般…

学习ts(六)数据类型(元组、枚举、Symbol、never)与类型推论

1.元组 元组&#xff08;Tuple&#xff09;是固定数量的不同类型的元素的组合。是数组的变种。 元组与集合的不同之处在于&#xff0c;元组中的元素类型可以是不同的&#xff0c;而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值&…

生成式人工智能的潜在有害影响与未来之路(三)

产品责任法的潜在适用 背景和风险 产品责任是整个二十世纪发展起来的一个法律领域&#xff0c;旨在应对大规模生产的产品可能对社会造成的伤害。这一法律领域侧重于三个主要危害&#xff1a;设计缺陷的产品、制造缺陷的产品和营销缺陷的产品。产品责任法的特点有两个要素&…

R包开发1:RStudio 与 GitHub建立连接

目录 1.安装Git 2-配置Git&#xff08;只需配置一次&#xff09; 3-用SSH连接GitHub(只需配置一次) 4-创建Github远程仓库 5-克隆仓库到本地 目标&#xff1a;创建的R包&#xff0c;包含Git版本控制&#xff0c;并且能在远程Github仓库同步&#xff0c;相当于发布在Github。…

C语言练习2(巩固提升)

C语言练习2 选择题 前言 “志之所趋&#xff0c;无远弗届&#xff0c;穷山距海&#xff0c;不能限也。”对想做爱做的事要敢试敢为&#xff0c;努力从无到有、从小到大&#xff0c;把理想变为现实。要敢于做先锋&#xff0c;而不做过客、当看客&#xff0c;让创新成为青春远航的…

xshell 学习记录

xshell 检查config目录是否在当前目录下存在 current_directory$(pwd) if [ -d "$current_directory/config" ]; then echo "config目录存在于当前目录。" else echo "config目录不存在于当前目录。" fi xshell检查某个端口是否被占用…

HTML 网页中 自定义图像单击或鼠标悬停时放大

HTML 网页中 自定义图像单击或鼠标悬停时放大 一&#xff1a;在悬停时更改 HTML 图像的大小 例子中&#xff0c;使用 CSS 样式&#xff1b;来设置每个图像元素的高宽 200px&#xff1b;以及 10px 边距&#xff0c;以便在图像周围留出空间。 使用 CSS 的 :hover 属性来添加悬停效…

EFCore常见用法

EFCore官方文档置顶&#xff0c;看这个就行。下面的内容只是总结&#xff0c;算是备忘录。 一、创建和删除 //1、创建数据库和表 db.Database.EnsureCreated();//将创建数据库&#xff08;如果不存在&#xff09;并初始化数据库架构。 如果存在任何表 (包括另一 DbContext 类)…

概念解析 | 电磁计算的新篇章:智能电磁计算

注1&#xff1a;本文系“概念解析”系列之一&#xff0c;致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是&#xff1a;智能电磁计算。 电磁计算的新篇章&#xff1a;智能电磁计算 随着人工智能的飞速发展&#xff0c;我们正处在一个信息爆炸的时代。各个领域&a…

图为科技-边缘计算在智慧医疗领域的作用

边缘计算在智慧医疗领域的作用 随着科技的进步&#xff0c;智慧医疗已成为医疗行业的重要发展趋势。边缘计算作为新兴技术&#xff0c;在智慧医疗领域发挥着越来越重要的作用。本文将介绍边缘计算在智慧医疗领域的应用及其优势&#xff0c;并探讨未来发展方向。 一、边缘计算…