当前位置: 首页 > news >正文

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 骨架屏组件源码&#xff0c;主要从以下四个方面来讲解&#xff1a; 1、skeleton 组件的页面结构 2、skeleton 组件的属性 3、skeleton item 组件的属性 4、skeleton 组件的 slot 一、skeleton 组件的页面结构 二、skeleton 组件的属性 2.1 animate…...

深度学习:基于TensorFlow、Keras,使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…...

【websocket-客户端可视化工具】

postman 新版postman (版本v11以上) &#xff0c;除了http协议&#xff0c;还支持了Websocket&#xff0c;MQTT&#xff0c;gRPC等多种连接协议&#xff0c;可以作为多种协议的客户端&#xff0c;使用起来非常方便。 使用 服务端代码 这里以websocket协议举例&#xff0c;代…...

STC8增强型单片机开发——C51版本Keil环境搭建

一、目标 了解C51版本Keil开发环境的概念和用途掌握C51版本Keil环境的安装和配置方法熟悉C51版本Keil开发环境的使用 二、准备工作 Windows 操作系统Keil C51 安装包&#xff08;可以从Keil官网下载&#xff09;一款8051单片机开发板 三、搭建流程 环境搭建的基本流程&#xf…...

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、动态规划-编辑距离

递归暴力解法 递归方法的基本思想是考虑最后一个字符的操作&#xff0c;然后根据这些操作递归处理子问题。 递归函数定义&#xff1a;定义一个递归函数 minDistance(i, j)&#xff0c;表示将 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)

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; STL || C 目录 前言&#x1f525;容量接口&#xff08;Capacity&#xff09;size和lengthcapacitymax_sizereserveresizeclearemptyshrink_to_fit &#x1f525;元素获取&#xff08;Ele…...

【漏洞复现】某小日子太阳能系统DataCube3审计

漏洞描述 某小日子太阳能系统DataCube3终端测量系统 多个漏洞利用方式 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守宪法法律,遵守公共秩序,尊重社会公德,不得利用网络从事危害国家安全、荣誉和利益,未经授权请勿利用文章中的技术资料对任何计算机系统进…...

探索Java的未来

目录 一、云计算与大数据 二、人工智能与机器学习 三、物联网与边缘计算 四、安全性与性能优化 五、社区与生态 Java&#xff0c;作为一种广泛使用的编程语言&#xff0c;自其诞生以来就以其跨平台性、面向对象特性和丰富的库资源赢得了开发者的青睐。然而&#xff0c;随着…...

Web3 ETF软件开发

开发Web3 ETF软件涉及到金融、法律和技术等多个领域的专业知识&#xff0c;因此存在以下技术难点&#xff0c;开发Web3 ETF软件是一项复杂的技术挑战&#xff0c;需要综合考虑各种因素。开发人员需要具备较强的技术能力和跨学科知识才能成功开发Web3 ETF软件。北京木奇移动技术…...

初始MySQL

初始化MySQL数据库通常涉及以下步骤&#xff1a; 下载并安装MySQL&#xff1a; 你可以从MySQL官方网站下载适合你的操作系统的MySQL安装包。安装时&#xff0c;遵循安装向导的步骤&#xff0c;通常包括选择安装位置、选择组件&#xff08;例如MySQL服务器、MySQL Workbench等&a…...

STM32项目下载清单(不定时更新)

收集的一些资料&#xff0c;分享下载 电赛一等奖作品&#xff0c;老人健康监测智能手表&#xff08;STM32F4主控&#xff09; STM32数字示波器源码数字信号处理教程、配套实例基于stm32 nucleo_L476的智能灯&#xff08;操作说明源码&#xff09;基于STM32 NUCLEO板设计彩色LE…...

thinkphp5 配合阿里直播实现直播功能流程

要为你提供一个更详细的教程来结合ThinkPHP 5和阿里直播SDK实现直播功能&#xff0c;需要涵盖的内容相对较多。不过&#xff0c;我可以为你提供一个大致的、更详细的步骤指南&#xff0c;供你参考和扩展&#xff1a; 1. 准备工作 a. 注册阿里云账号 前往阿里云官网注册账号&…...

安卓手机APP开发__媒体3格式转换器__常见问题解答

安卓手机APP开发__媒体3格式转换器__常见问题解答 目录 1 为什么在示例的APP中我不能读取到本地的文件&#xff1f; 2 在一个特定的设备为什么导出失败&#xff1f; 3 媒体3格式转换器支持转码&#xff08;或者是录制&#xff09;远程的媒体吗&#xff1f; 4 媒体3格式转换…...

leetcode-有重复数字的全排列-98

题目要求 思路 1.同【没有重复项的全排列-97】这个题一样&#xff0c;都是递归的题&#xff0c;区别在于这个可能会包含重复的数字&#xff0c;因此&#xff0c;不能只是简单的通过两个值是否相等然后用标志位标记&#xff0c;而是新增了一个数组&#xff0c;这个数组专门用于…...

Unity数据持久化之XML

目录 数据持久化XML概述XML文件格式XML基本语法XML属性 C#读取存储XMLXML文件存放位置C#读取XML文件C#存储XML文件 实践小项目必备知识点XML序列化&#xff08;不支持字典&#xff09;XML反序列化IXmlSerializable接口让Dictionary支持序列化反序列化 数据持久化XML概述 什么是…...

Leetcode 226:翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 思路&#xff1a;使用递归 //使用前序遍历翻转树public static TreeNode invertTree(TreeNode root){if(rootnull) return root;swap(root);invertTree(root.left);invertTree(root.rig…...

柯里化与无参装饰器

柯里化 柯里化的概念&#xff1a;柯里化&#xff08;Currying&#xff09;在Python中是一种编程技术&#xff0c;它将原本接受多个参数的函数转换为一系列接受单个参数的函数。这种方法以逻辑学家Haskell Curry的名字命名。 简而言之就是将一次函数调用变成先放入一个参数得到…...

GraphRAG实战指南:12种技术对比,教你如何选择最适合的图结构RAG方案

GraphRAG技术选型实战&#xff1a;12种方案深度解析与场景适配指南 当传统RAG在简单问答场景中表现尚可时&#xff0c;面对需要多跳推理、深度上下文关联的复杂任务&#xff0c;GraphRAG正展现出独特优势。本文将从工程实践角度&#xff0c;拆解12种主流GraphRAG技术的核心差异…...

告别复杂配置:SDXL 1.0电影级绘图工坊开箱即用体验

告别复杂配置&#xff1a;SDXL 1.0电影级绘图工坊开箱即用体验 1. 为什么选择SDXL 1.0电影级绘图工坊 在AI绘图领域&#xff0c;Stable Diffusion XL&#xff08;SDXL&#xff09;1.0代表了当前最先进的文本到图像生成技术。然而&#xff0c;对于大多数非技术背景的创作者来说…...

TurboDiffusion应用场景探索:电商、教育、社交,AI视频如何赋能各行各业

TurboDiffusion应用场景探索&#xff1a;电商、教育、社交&#xff0c;AI视频如何赋能各行各业 1. 引言&#xff1a;AI视频生成的新纪元 想象一下这样的场景&#xff1a;早上9点&#xff0c;电商运营团队需要为100款新产品制作展示视频&#xff1b;下午2点&#xff0c;在线教…...

实测有效方案:星图平台一键部署Qwen3-VL:30B,接入飞书提升办公效率

实测有效方案&#xff1a;星图平台一键部署Qwen3-VL:30B&#xff0c;接入飞书提升办公效率 1. 为什么选择Qwen3-VL:30B作为办公助手 1.1 办公场景中的图文处理痛点 在日常办公中&#xff0c;我们经常遇到需要同时处理图片和文字的场景。比如会议结束后&#xff0c;群里堆满了…...

vLLM-v0.17.1在专利分析系统中的应用:权利要求生成与比对

vLLM-v0.17.1在专利分析系统中的应用&#xff1a;权利要求生成与比对 1. 技术背景与需求分析 专利分析是知识产权领域的重要工作&#xff0c;其中权利要求书的生成与比对是核心环节。传统方法依赖人工撰写和比对&#xff0c;效率低下且一致性难以保证。随着大语言模型技术的发…...

大数据产品实战:用户画像系统的设计与实现

大数据产品实战:用户画像系统的设计与实现 关键词:用户画像、标签体系、大数据平台、精准营销、数据挖掘 摘要:用户画像系统是大数据时代企业实现“以用户为中心”运营的核心工具,它通过给用户“贴标签”的方式,将复杂的用户行为转化为可量化、可分析的数字特征。本文将从…...

OpenClaw智能邮件助手:nanobot镜像自动分类与回复重要邮件

OpenClaw智能邮件助手&#xff1a;nanobot镜像自动分类与回复重要邮件 1. 为什么需要智能邮件助手 每天早晨打开邮箱&#xff0c;看到堆积如山的未读邮件总是让人头疼。重要客户的询盘可能被埋没在促销广告中&#xff0c;紧急的协作请求可能因为延迟回复而影响项目进度。作为…...

OpenClaw+GLM-4.7-Flash:自动化代码审查与优化建议

OpenClawGLM-4.7-Flash&#xff1a;自动化代码审查与优化建议 1. 为什么需要自动化代码审查 作为一名长期与代码打交道的开发者&#xff0c;我深知代码审查的重要性&#xff0c;但传统的人工审查存在几个痛点&#xff1a;时间成本高、标准不统一、容易遗漏细节。特别是在个人项…...

手把手教你用RTABMAP+T265在Windows10上实现室内三维扫描(含标定技巧)

手把手教你用RTABMAPT265在Windows10上实现高精度室内三维扫描 第一次接触室内三维扫描时&#xff0c;我被这项技术深深吸引——它能让物理空间瞬间数字化&#xff0c;就像给现实世界按下"CtrlC"。但真正动手配置RTABMAP和T265相机时&#xff0c;才发现这条路并不平坦…...

Web开发中前端与Node服务中的信息安全与解决办法

Web开发中前端与Node服务中的信息安全与解决办法 input限制特殊字符和长度 漏洞描述&#xff1a; 永远不要相信用户输入的信息&#xff0c;如常规的注入脚本通过input输入之后被页面执行 整改办法 方法1&#xff1a;对于vue项目中ElementUI的el-input 和 原生input <el-in…...