Vue的省份联动
Vue的省份联动
一、安装依赖库
npm install element-china-area-data -Snpm install element-ui --save全局使用elemntui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
二 、代码如下
<template><div><el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader><div>所选省市区: {{ selectedRegion }}</div><el-button type="primary" @click="fillInAddress">回填地址</el-button></div>
</template><script>
import { regionData } from "element-china-area-data"; // 引入export default {data() {return {options: regionData,provinces: [],selectedRegion: '' // 用于显示选中的省市区中文};},methods: {handleChange(value) {const text = this.findTextByValue(value); // 调用方法查找选中的省市区的中文文本this.selectedRegion = text;},// 根据选中的省市区代码查找对应的中文文本findTextByValue(value) {let text = '';let data = regionData;for (let i = 0; i < value.length; i++) {const val = value[i];const item = data.find(item => item.value === val);if (item) {text += item.label;if (i !== value.length - 1) {text += ' / ';data = item.children || [];}}}return text;},// 将从数据库查询出来的地址回填到省份联动选择器中fillInAddress() {// 假设从数据库查询出来的地址是一个包含省、市、区的地址字符串const address = "广东省 深圳市 南山区";const addressArray = address.split(' ');const valueArray = [];let tempOptions = regionData;for (let i = 0; i < addressArray.length; i++) {const addressItem = addressArray[i];const item = tempOptions.find(item => item.label === addressItem);if (item) {valueArray.push(item.value);tempOptions = item.children || [];}}this.provinces = valueArray;}}
};
</script>
效果图

相关文章:
Vue的省份联动
Vue的省份联动 一、安装依赖库 npm install element-china-area-data -Snpm install element-ui --save全局使用elemntui组件库 import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);二 、代码如下 <template><div…...
element-ui skeleton 组件源码分享
今日简单分享 skeleton 骨架屏组件源码,主要从以下四个方面来讲解: 1、skeleton 组件的页面结构 2、skeleton 组件的属性 3、skeleton item 组件的属性 4、skeleton 组件的 slot 一、skeleton 组件的页面结构 二、skeleton 组件的属性 2.1 animate…...
深度学习:基于TensorFlow、Keras,使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析
前言 系列专栏:机器学习:高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目,每个项目都处理一组不同的问题,包括监督和无监督学习、分类、回归和聚类,而且涉及创建深度学…...
【websocket-客户端可视化工具】
postman 新版postman (版本v11以上) ,除了http协议,还支持了Websocket,MQTT,gRPC等多种连接协议,可以作为多种协议的客户端,使用起来非常方便。 使用 服务端代码 这里以websocket协议举例,代…...
STC8增强型单片机开发——C51版本Keil环境搭建
一、目标 了解C51版本Keil开发环境的概念和用途掌握C51版本Keil环境的安装和配置方法熟悉C51版本Keil开发环境的使用 二、准备工作 Windows 操作系统Keil C51 安装包(可以从Keil官网下载)一款8051单片机开发板 三、搭建流程 环境搭建的基本流程…...
Ansible——playbook编写
目录 环境配置 一、简介 1.什么是playbook 2.playbook组成 二、应用实例 1.基础命令 1.编写 ceshi1.yaml 文件 2.运行Playbook 2.定义、引用变量 1.编写ceshi2.yaml文件 3.指定远程主机sudo切换用户 1.编写ceshi3.yaml文件 2.修改被控主机sudoers文件 3.给zhangsa…...
95、动态规划-编辑距离
递归暴力解法 递归方法的基本思想是考虑最后一个字符的操作,然后根据这些操作递归处理子问题。 递归函数定义:定义一个递归函数 minDistance(i, j),表示将 word1 的前 i 个字符转换成 word2 的前 j 个字符所需的最小操作数。 递归终止条件…...
linux调试
文章目录 1. 使用打印来调试1.1 重定向1.2 标准预定义宏1.3 日志代码 2. 内核异常2.1 内核打印2.1.1 打印级别2.1.2 跟踪异常2.1.3 动态打印2.1.4 RAM console 2.2 OOPS2.2.1 有源代码的情况2.2.2 没有源代码的情况 3 查看日志4 工具调试 1. 使用打印来调试 1.1 重定向 2>…...
【C++】string类的使用②(容量接口Capacity || 元素获取Element access)
🔥个人主页: Forcible Bug Maker 🔥专栏: STL || C 目录 前言🔥容量接口(Capacity)size和lengthcapacitymax_sizereserveresizeclearemptyshrink_to_fit 🔥元素获取(Ele…...
【漏洞复现】某小日子太阳能系统DataCube3审计
漏洞描述 某小日子太阳能系统DataCube3终端测量系统 多个漏洞利用方式 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权请勿利用文章中的技术资料对任何计算机系统进…...
探索Java的未来
目录 一、云计算与大数据 二、人工智能与机器学习 三、物联网与边缘计算 四、安全性与性能优化 五、社区与生态 Java,作为一种广泛使用的编程语言,自其诞生以来就以其跨平台性、面向对象特性和丰富的库资源赢得了开发者的青睐。然而,随着…...
Web3 ETF软件开发
开发Web3 ETF软件涉及到金融、法律和技术等多个领域的专业知识,因此存在以下技术难点,开发Web3 ETF软件是一项复杂的技术挑战,需要综合考虑各种因素。开发人员需要具备较强的技术能力和跨学科知识才能成功开发Web3 ETF软件。北京木奇移动技术…...
初始MySQL
初始化MySQL数据库通常涉及以下步骤: 下载并安装MySQL: 你可以从MySQL官方网站下载适合你的操作系统的MySQL安装包。安装时,遵循安装向导的步骤,通常包括选择安装位置、选择组件(例如MySQL服务器、MySQL Workbench等&a…...
STM32项目下载清单(不定时更新)
收集的一些资料,分享下载 电赛一等奖作品,老人健康监测智能手表(STM32F4主控) STM32数字示波器源码数字信号处理教程、配套实例基于stm32 nucleo_L476的智能灯(操作说明源码)基于STM32 NUCLEO板设计彩色LE…...
thinkphp5 配合阿里直播实现直播功能流程
要为你提供一个更详细的教程来结合ThinkPHP 5和阿里直播SDK实现直播功能,需要涵盖的内容相对较多。不过,我可以为你提供一个大致的、更详细的步骤指南,供你参考和扩展: 1. 准备工作 a. 注册阿里云账号 前往阿里云官网注册账号&…...
安卓手机APP开发__媒体3格式转换器__常见问题解答
安卓手机APP开发__媒体3格式转换器__常见问题解答 目录 1 为什么在示例的APP中我不能读取到本地的文件? 2 在一个特定的设备为什么导出失败? 3 媒体3格式转换器支持转码(或者是录制)远程的媒体吗? 4 媒体3格式转换…...
leetcode-有重复数字的全排列-98
题目要求 思路 1.同【没有重复项的全排列-97】这个题一样,都是递归的题,区别在于这个可能会包含重复的数字,因此,不能只是简单的通过两个值是否相等然后用标志位标记,而是新增了一个数组,这个数组专门用于…...
Unity数据持久化之XML
目录 数据持久化XML概述XML文件格式XML基本语法XML属性 C#读取存储XMLXML文件存放位置C#读取XML文件C#存储XML文件 实践小项目必备知识点XML序列化(不支持字典)XML反序列化IXmlSerializable接口让Dictionary支持序列化反序列化 数据持久化XML概述 什么是…...
Leetcode 226:翻转二叉树
给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 思路:使用递归 //使用前序遍历翻转树public static TreeNode invertTree(TreeNode root){if(rootnull) return root;swap(root);invertTree(root.left);invertTree(root.rig…...
柯里化与无参装饰器
柯里化 柯里化的概念:柯里化(Currying)在Python中是一种编程技术,它将原本接受多个参数的函数转换为一系列接受单个参数的函数。这种方法以逻辑学家Haskell Curry的名字命名。 简而言之就是将一次函数调用变成先放入一个参数得到…...
如何快速为Obsidian插件添加状态栏功能:完整指南与实用示例
如何快速为Obsidian插件添加状态栏功能:完整指南与实用示例 【免费下载链接】obsidian-sample-plugin 项目地址: https://gitcode.com/GitHub_Trending/ob/obsidian-sample-plugin Obsidian Sample Plugin是一个官方提供的插件开发示例,展示了如…...
别再折腾虚拟机了!用Docker 5分钟搞定Oracle 10g测试环境(附阿里云镜像源)
5分钟极速部署Oracle 10g:Docker化开发环境实战指南 每次需要搭建Oracle测试环境时,你是否也经历过这样的痛苦?下载几个GB的安装包、配置复杂的系统参数、等待漫长的安装过程,最后可能还会遇到各种依赖问题。作为一名长期与Oracle…...
Bedtools终极指南:基因组数据分析的完整工具集
Bedtools终极指南:基因组数据分析的完整工具集 【免费下载链接】bedtools A powerful toolset for genome arithmetic. 项目地址: https://gitcode.com/gh_mirrors/be/bedtools Bedtools是一个强大的基因组数据分析工具集,专门用于处理基因组区间…...
实战演练:基于快马平台快速构建一个电商场景的智能客服AI Agent
实战演练:基于快马平台快速构建一个电商场景的智能客服AI Agent 最近在做一个电商项目,需要给平台增加智能客服功能。传统开发流程要写大量业务逻辑代码,还要处理前后端对接,想想就头大。后来发现用InsCode(快马)平台可以快速实现…...
MCP服务器性能翻倍的秘密:基于asyncio+uvloop+Pydantic V2的轻量级模板(压测QPS达12,800+)
第一章:MCP服务器开发模板概述与核心价值MCP(Model-Controller-Protocol)服务器开发模板是一套面向协议驱动、可插拔架构的后端服务构建范式,专为高并发、多协议适配(如HTTP/2、gRPC、WebSocket、MQTT)场景…...
ViGEmBus虚拟手柄驱动全栈技术指南:从内核原理到游戏控制革新
ViGEmBus虚拟手柄驱动全栈技术指南:从内核原理到游戏控制革新 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 一、认知虚拟手柄技术:…...
对抗训练新玩法:用AdverIN攻击自己反而提升医学分割模型20%泛化性
医学影像分割的对抗训练革命:AdverIN如何让模型在新设备上表现更优 医学影像分析领域正面临一个尴尬的现实:实验室里表现优异的深度学习模型,在真实临床环境中常常"水土不服"。不同医院使用的扫描设备、成像协议差异导致的域偏移&a…...
GNN实战:Cora、Citeseer、PubMed三大文献数据集保姆级使用指南(附代码)
GNN实战:Cora、Citeseer、PubMed三大文献数据集深度解析与工程实践 引言:为什么这三个数据集成为GNN研究的"黄金标准"? 在探索图神经网络(GNN)的浩瀚宇宙中,Cora、Citeseer和PubMed如同三颗璀璨的…...
Next AI Draw.io:从自然语言到专业图表,AI如何重塑技术绘图工作流
1. 当技术绘图遇上AI:一场效率革命 上周三凌晨两点,我还在为一个客户紧急赶制系统架构图。传统绘图工具里反复拖拽调整的机械操作,让我的咖啡消耗量达到了平日的三倍。直到偶然发现Next AI Draw.io这个神器——用一句"生成包含负载均衡和…...
别再为气象数据发愁!手把手教你用HYSPLIT做后向轨迹分析(附GDAS1数据下载指南)
从零掌握HYSPLIT后向轨迹分析:气象数据获取与实战技巧全解析 当你在环境科学或大气污染研究中首次接触HYSPLIT模型时,最令人头疼的往往不是软件操作本身,而是那些看似简单却暗藏玄机的气象数据准备工作。我曾见过无数研究生在深夜实验室里反复…...
