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>

效果图
在这里插入图片描述

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

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

相关文章

一、手写一个uart协议——rs232

先了解一下关于uart和rs232的基础知识 文章目录 一、RS232的回环测试1.1模块整体架构1.2 rx模块设计1.2.1 波形设计1.2.2代码实现与tb1.2.4 仿真 1.3 tx模块设计1.3.1 波形设计1.3.2 代码实现与tb1.3.4 顶层设计1.3.3 仿真 本篇内容&#xff1a; 一、RS232的回环测试 上位机…

制造业的智慧进化:机器学习与人工智能的全方位渗透

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

地图位置的二维码怎么做?在线制作地图二维码的方法

怎么定位一个位置做成二维码呢&#xff1f;随着互联网的不断发展&#xff0c;现在通过扫描二维码来获取导航位置的方式有很多的场景都在应用。这种方式的好处在于其他人都可以通过这个二维码来获取位置&#xff0c;有利于分享。 导航地图二维码可以在电脑的二维码生成器上快速…

爬虫爬取必应和百度搜索界面的图片

爬虫爬取必应和百度搜索界面的图片 爬取bing搜索图片界面爬取百度搜索界面图片结果如下 爬取bing搜索图片界面 浏览器驱动下载地址 对应版本即可 浏览器驱动 mad直接用 import os import re from selenium import webdriver from selenium.webdriver import Keys from sel…

【ACM出版】第四届控制与智能机器人国际学术会议(ICCIR 2024)

第四届控制与智能机器人国际学术会议&#xff08;ICCIR 2024&#xff09; 2024 4th International Conference on Control and Intelligent Robotics 2024年6月21日-23日 | 中国-广州 官网&#xff1a;www.ic-cir.org EI、Scopus双检索 投稿免费参会、口头汇报及海报展示 四…

leetcode63.跳跃游戏2(动态规划)

问题描述&#xff1a; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物…

vue3+vite+axios+ElementPlus+ElLoading简易封装

1.安装按需加载element-plus需要的依赖包 pnpm install element-pluspnpm install axios# 按需自动导入 pnpm install -D unplugin-vue-components unplugin-auto-import# 自动导入element-plus样式 pnpm install -D vite-plugin-style-import2.修改jsconfig.json {"com…

基于scarpy框架的肯德基中国门店信息获取

基于scarpy框架的肯德基中国门店信息获取 一.项目流程二.对爬虫文件进行编写三.对管道进行编写 一.项目流程 scrapy基础知识: https://blog.csdn.net/qq_44907926/article/details/119531324 1.创建scrapy项目:scrapy startproject <项目名> 2.在项目中生成一个爬虫: sc…

某票星球网图标点选验证码YOLOV8识别案例

注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路 如有侵犯,请联系作者下架 图标点选验证码大家都不陌生了,我们来看下数据集 引言与个人想法 先说结论,本文采用的方法能够达到99的准确率,效果图如下 做图标点选其实方法有很多,有的…

使用网络工具监控网络性能

网络工具和实用程序有助于有效地检测网络问题&#xff0c;诊断其原因和位置&#xff0c;以及缓解和解决问题&#xff0c;这有助于确保网络环境的稳定性&#xff0c;使用户免受设备连接问题带来的麻烦。 网络工具已经成为每个网络管理员用于有效诊断和处理网络问题的解决方案中…

暴露自己IP地址有什么危险

暴露自己的IP地址确实存在一定的危险性&#xff0c;以下是关于这一问题的详细探讨&#xff1a; 一、IP地址的重要性 IP地址是互联网通信中的关键标识&#xff0c;它使得网络中的设备能够相互识别并进行数据传输。在网络世界中&#xff0c;每台设备都需要一个独特的IP地址来确…

斯坦福大学的在线密码学课程

密码学是保护计算机系统信息不可或缺的工具。在本课程中&#xff0c;您将了解密码系统的内部工作原理&#xff0c;以及如何在实际应用中正确使用它们。课程首先将详细讨论当强大的对手窃听和篡改流量时&#xff0c;拥有共享密钥的双方如何进行安全通信。我们将研究许多已部署的…

SAP sq01,sq02,sq03创建query报表

步骤&#xff1a;1&#xff0c;SQ03创建用户组&#xff08;User Group&#xff09; 2&#xff0c;SQ02创建信息集&#xff08;InfoSet&#xff09; 3&#xff0c;SQ03分配用户和InfoSet 4&#xff0c;SQ01创建查询 5&#xff0c;SE93给Query分配Tcode 1&#xff0c;SQ03创建用…

ifconfig命令找不到 command not found

问题 今天解决虚拟机的网络问题后&#xff0c;使用ifconfig发现报错命令未找到 解决方案 输入yum install ifconfi的程序安装包 yum install ifconfig 如果显示没有可用软件包 ifconfig&#xff0c;错误&#xff1a;。 就输入yum search ifconfig匹配安装包程序 yum searc…

2024好用的4款3D雕刻软件,快来拿走

3D 雕刻是一种让角色、怪物或任何有机形状栩栩如生的方法。您可以将其视为由粘土制成的真实模型&#xff0c;并可以根据您的意愿推、拉、平滑、抓住或捏它以创建其最终形状。3d 雕刻有哪些软件好用&#xff1f;3d 雕刻软件对电脑要求高吗&#xff1f;电脑带不动3d软件怎么办&am…

【隧道篇 / WAN优化】(7.4) ❀ 03. WAN优化的原理 ❀ FortiGate 防火墙

【简介】相信对WAN优化感兴趣的人都会有疑问&#xff0c;WAN优化真的有作用吗&#xff1f;如果真的有作用&#xff0c;那是根据什么原理呢&#xff1f;让我们来更深入的了解一下。 客户端和服务器端 其实很多人在一开始看到WAN优化这个词&#xff0c;就自然的以为上网速度太慢&…

How Linux Works I - How Linux Start Up

目录 Linux如何启动&#xff1f; 启动信息 内核启动初始化与启动选项 写在前面&#xff1a;上一个专栏中我写完了内核源码层面看Linux&#xff0c;我们把抽象层拉高一点&#xff0c;看看Linux是如何工作的&#xff01; Linux如何启动&#xff1f; BIOS&#xff08;Basic Inpu…

linux基础命令第二篇

雷迪斯and the乡亲们 欢迎你们来到 奇幻的编程世界 8.history命令 作用&#xff1a;查看和控制历史命令纪录 保存位置&#xff1a;&#xff1a;~/.bash_history &#xff08;1&#xff09;在启动终端的时候&#xff0c;会自动从&#xff1a;~/.bash_history 中读取历史命令…

【优选算法】——双指针——15. 三数之和

目录 1.题目 2.解法&#xff08;排序双指针&#xff09;&#xff1a; 算法思路&#xff1a; 3.代码实现 1.题目 15. 三数之和 提示 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足…

RT-Thread移植到STM32F407

1、获取RT-Thread源码 首先到rtthread官网下载rt-thread nano后解压 解压后打开后内容如下。 2、系统结构 各文件夹的作用如下&#xff1a; Rt-Thread-nano源码结构 文件夹描述bsp板级支持包components/finshRT-Thread组件docs文档信息include头文件libcpu/arm与arm处理器相…