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

vue 省市县三级联动

1、

<template><div>所在省<el-select popper-class="eloption" :popper-append-to-body="true"@change="getShiList(obj.province)" v-model="obj.province" placeholder="请选择所在省" clearable@clear="removeSheng()"><el-option v-for="(item, index) in shengList" :key="item.code" :value="item.name" :label="item.name" /></el-select>所在市<el-select popper-class="eloption" :popper-append-to-body="true"@change="getAreaList(obj.city)" v-model="obj.city" placeholder="请选择所在市" clearable @clear="removeShi()"><el-option v-for="(item, index) in shiList" :key="item.code" :value="item.name" :label="item.name" /></el-select>所在区<el-select popper-class="eloption" :popper-append-to-body="true" @change="$forceUpdate()"v-model="obj.area" placeholder="请选择所在区" clearable><el-option v-for="(item, index) in areaList" :key="item.code" :value="item.name" :label="item.name" /></el-select></div>
</template><script>
const arr = require('@/assets/city.js');
export default {data() {return {shengList: arr.default,shiList: [],  //arr.default[0].code  北京市一个对象,其他省可有多个市areaList: [],obj: {// province:'',// city: '',// area: '',},}},methods:{// 获得市getShiList(shengName) {this.$forceUpdate()this.obj.city = ''this.obj.area = ''this.shengList.forEach(v => {if (v.name == shengName) {this.shiList = v.children}})},// 获得区getAreaList(shiName) {this.$forceUpdate()this.obj.area = ''this.shiList.forEach(v => {if (v.name == shiName) {this.areaList = v.children}})},removeSheng(e){console.log("删除省")this.$forceUpdate()// this.obj.sheng = ''// this.obj.city = ''// this.obj.area = ''this.shiList = []this.areaList = []},removeShi(e){console.log("删除shi")this.$forceUpdate()// this.obj.city = ''// this.obj.area = ''this.areaList = []},}
}
</script><style></style>

2、city.js
文件太大了
https://download.csdn.net/download/Ann_52547/87755408
格式是这样的:

const arr = [
{"code": "11","name": "北京市","children": [{"code": "1101","name": "北京市","children": [{"code": "110101","name": "东城区"},{"code": "110102","name": "西城区"}]}]}

参考:
1、这个文件可以下载
省市区三级联动城市数据js文件。(复制后放入citys.js文件中,可自定义文件名)
2、distpicker插件编写
vue实现省市县三级联动,超简单
3、vue中实现省市区三级联动(V-Distpicker插件)

相关文章:

vue 省市县三级联动

1、 <template><div>所在省<el-select popper-class"eloption" :popper-append-to-body"true"change"getShiList(obj.province)" v-model"obj.province" placeholder"请选择所在省" clearableclear"re…...

ChatGPT实现编程语言转换

编程语言转换 对于程序员来说&#xff0c;往往有一类工作&#xff0c;是需要将一部分业务逻辑实现从服务端转移到客户端&#xff0c;或者从客户端转移到服务端。这类工作&#xff0c;通常需要将一种编程语言的代码转换成另一种编程语言的代码&#xff0c;这就需要承担这项工作…...

浅拷贝和深拷贝

浅拷贝&#xff1a; 定义&#xff1a;浅拷贝&#xff08;Shallow Copy&#xff09;是一种简单的对象复制方式&#xff0c;将一个对象的数据成员直接复制给另一个对象&#xff08;通常是通过默认的复制构造函数或赋值运算符实现&#xff09;&#xff0c;这些数据成员可以是基本…...

进程地址空间与页表方面知识点(缺页中断及写时拷贝部分原理)

谢谢阅读&#xff0c;如有错误请大佬留言&#xff01;&#xff01; 目录 谢谢阅读&#xff0c;如有错误请大佬留言&#xff01;&#xff01; 抛出总结 开始介绍 发现问题 进程地址空间&#xff08;虚拟地址&#xff09; 页表 物理内存与进程地址空间映射 缺页中断基本…...

Photoshop如何使用滤镜之实例演示?

文章目录 0.引言1.将普通照片制作成油画效果2.使用液化滤镜修出完美身材3.用镜头光晕滤镜制作唯美的逆光人像4.用Camera Raw滤镜对偏色风景照进行调色 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对PS进行了学习&#xff0c;本文通过《Photoshop2021入门教程》及其…...

Flutter 组件抽取:日期(DatePicker)、时间(TimePicker)弹窗选择器【仿照】

简介 仿照《Flutter 仿ios自定义一个DatePicker》实行的日期弹窗选择器&#xff08;DatePicker&#xff09;、时间弹窗选择器&#xff08;TimePicker&#xff09; 效果 范例 class _TestPageState extends State<TestPage> {overridevoid initState() {super.initStat…...

基于opencv的YOLOV3对图片的目标检测

目录 1. 准备工作 2. utils 函数 2.1 plot_show 函数 2.2 get_prediction 函数 2.3 draw_bounding_box 绘制边界框函数...

Mermaid流程图

所有流程图都由节点&#xff0c;几何形状和边缘&#xff0c;箭头或线条组成。mermaid代码定义了这些节点和边缘的制作和交互方式。 它还可以容纳不同的箭头类型、多方向箭头以及与子图之间的链接。 1、流程图的方向 TB - 从上到下TD - 自上而下/与上到下相同BT - 从下到上RL -…...

国产!全志科技T507-H工业核心板( 4核ARM Cortex-A5)规格书

1核心板简介 创龙科技 SOM-TLT507 是一款基于全志科技 T507-H 处理器设计的 4 核 ARM Cortex-A 53 全国产工业核心板,主频高达 1.416GHz 。核心板 CPU 、ROM 、RAM、电源、晶振等所有元器件均采用国产工业级方案,国产化率 100%。 核心板通过邮票孔连接方式引出 MIPI CSI 、…...

java小记 2023-05-05

public class Test {/*** 谓类的方法就是指类中用static 修饰的方法&#xff08;非static 为实例方法&#xff09;&#xff0c;比如main 方法&#xff0c;那么可以以main* 方法为例&#xff0c;可直接调用其他类方法&#xff0c;必须通过实例调用实例方法&#xff0c;this 关键…...

CentOS安装Nginx

准备工作 在安装Nginx之前&#xff0c;我们需要进行一些准备工作&#xff1a; 确认系统是否已经安装了Nginx。如果已经安装了&#xff0c;需要卸载掉旧版本。安装EPEL源&#xff0c;以获取Nginx的软件包。安装必要的依赖软件包。 卸载旧版Nginx 如果已经安装了旧版本的Ngin…...

CSS布局基础(CSS书写顺序 导航栏写法 常见问题)

CSS布局基础&#xff08;CSS书写顺序 & 导航栏写法&#xff09; CSS布局基础&#xff08;CSS书写顺序&#xff09;导航栏写法PC端网页开发一般步骤容易出问题的点 CSS布局基础&#xff08;CSS书写顺序&#xff09; 布局定位属性自身属性&#xff08;宽高&#xff0c;边框&…...

打造卓越 QML 层级设计:从入门到精通

目录标题 引言&#xff1a;QML 层级设计的重要性1.1 什么是 QML1.2 层级设计的核心理念1.3 实际应用案例 QML 基础知识2.1 语言概述2.2 基本元素2.3 属性和信号 设计原则与规范3.1 命名规范3.1.1 标识符命名3.1.2 文件命名3.1.3 文件夹命名 3.2 代码风格3.2.1 缩进与空格3.2.2 …...

shell流程控制之条件判断练习

1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。​ 因为如果磁盘剩余空间小于20G需要报警发送邮件给管理员&#xff0c;所以需要对管理员的邮箱进行设置 &#xff08;1&#xff09;首先…...

linux中TF启动卡制作:磁盘分区文件同步

文章目录 前言&#xff1a;1. 连接TF卡2. 磁盘卸载载与分区2.1 磁盘卸载2.2 创建第一个分区2.3 创建第二个分区 3. 磁盘格式化4. 文件同步5. 检查与BOOT分区启动文件拷贝总结&#xff1a; 前言&#xff1a; TF卡在linux环境下配置好相关软件后&#xff0c;把配置好的系统以及软…...

【操作系统OS】学习笔记:第一章 操作系统基础【哈工大李治军老师】

基于本人观看学习 哈工大李治军老师主讲的操作系统课程 所做的笔记&#xff0c;仅进行交流分享。 特此鸣谢李治军老师&#xff0c;操作系统的神作&#xff01; 如果本篇笔记帮助到了你&#xff0c;还请点赞 关注 支持一下 ♡>&#x16966;<)!! 主页专栏有更多&#xff0…...

Linux C/C++ 网络编程中地址格式转换(inet_pton和inet_ntop函数)

网络编程中地址格式转换&#xff08;inet_pton和inet_ntop函数&#xff09; 地址格式转换 #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h>int inet_pton(int af , const char * src ,void * dst);&#xff08;1&#xf…...

庖丁解牛函数知识---C语言《2》

目录 前言&#xff1a; 1.嵌套调用函数 2.链式访问 3.函数的声明与定义 4.*递归 5.递归与非递归 ❤博主CSDN:啊苏要学习 ▶专栏分类&#xff1a;C语言◀ C语言的学习&#xff0c;是为我们今后学习其它语言打好基础&#xff0c;C生万物&#xff01; 开始我们的C语言之旅吧…...

Git 使用教程:最详细、最正宗手把手教学(万字长文)

目录 一&#xff1a;Git二&#xff1a;SVN与Git的的区别三、安装Git四&#xff1a;常规操作五&#xff1a;远程仓库六&#xff1a;创建与合并分支七&#xff1a;bug分支八&#xff1a;多人协作九&#xff1a;git可视化工具 Git Git 是一种分布式版本控制系统&#xff0c;用于…...

【华为OD机试 2023最新 】最优资源分配/芯片资源占用(C语言题解 100%)

文章目录 题目描述输入描述输出描述备注用例题目解析代码思路C语言题目描述 某块业务芯片最小容量单位为1.25G,总容量为M*1.25G,对该芯片资源编号为1,2,…,M。该芯片支持3种不同的配置,分别为A、B、C。 配置A:占用容量为 1.25 * 1 = 1.25G配置B:占用容量为 1.25 * 2 =…...

微软DebugMCP:可视化调试MCP协议,解决AI与工具通信黑盒问题

1. 项目概述&#xff1a;当你的AI助手开始“自言自语”&#xff0c;你需要一个调试器 最近在折腾AI应用开发的朋友&#xff0c;估计没少跟各种“智能体”打交道。无论是基于OpenAI的GPTs&#xff0c;还是那些能联网、能调用工具的自定义助手&#xff0c;它们背后的核心通信协议…...

西门子PLC通信必备:手把手教你用SCL编写Modbus RTU CRC校验功能块

西门子PLC通信实战&#xff1a;SCL实现Modbus RTU CRC校验的工程化解决方案 在工业自动化领域&#xff0c;可靠的数据通信如同设备的神经系统。当两台PLC需要通过RS485接口交换温度传感器读数时&#xff0c;Modbus RTU协议因其简洁高效成为首选。但许多工程师在调试阶段都会遇到…...

如何3步免费解锁WeMod专业版:2026年终极增强工具使用指南

如何3步免费解锁WeMod专业版&#xff1a;2026年终极增强工具使用指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 还在为WeMod专业版的订阅费用而犹豫…...

Windows Defender终极移除指南:高效卸载13项核心服务完整教程

Windows Defender终极移除指南&#xff1a;高效卸载13项核心服务完整教程 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirr…...

百度网盘直链解析工具:突破下载限速的Python解决方案

百度网盘直链解析工具&#xff1a;突破下载限速的Python解决方案 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 你是否曾经为百度网盘的下载速度而烦恼&#xff1f;作为国内最…...

5分钟快速上手:使用res-downloader实现视频号批量下载的终极指南

5分钟快速上手&#xff1a;使用res-downloader实现视频号批量下载的终极指南 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader …...

Seraphine:英雄联盟智能BP助手与战绩查询工具完整指南

Seraphine&#xff1a;英雄联盟智能BP助手与战绩查询工具完整指南 【免费下载链接】Seraphine 英雄联盟战绩查询工具 项目地址: https://gitcode.com/gh_mirrors/se/Seraphine 在英雄联盟的对局中&#xff0c;BP&#xff08;禁选英雄&#xff09;阶段往往是决定胜负的关…...

模拟电路布局优化:多智能体强化学习实践

1. 模拟电路布局优化的挑战与机遇在集成电路设计领域&#xff0c;模拟电路布局一直是个令人头疼的问题。作为一名从业十余年的模拟电路设计师&#xff0c;我深刻体会到传统布局方法在面对现代工艺挑战时的局限性。每次手工调整晶体管位置时&#xff0c;那种"差之毫厘&…...

脉冲神经网络与神经形态计算的能效优化实践

1. 脉冲神经网络与神经形态计算基础脉冲神经网络&#xff08;SNN&#xff09;作为第三代神经网络模型&#xff0c;其核心在于模拟生物神经系统的信息处理机制。与传统人工神经网络&#xff08;ANN&#xff09;相比&#xff0c;SNN具有三个本质区别&#xff1a;首先&#xff0c;…...

数据中心碳足迹与可靠性优化框架解析

1. 数据中心碳足迹与可靠性优化的挑战 现代数据中心已成为数字经济的动力引擎&#xff0c;但伴随算力需求的爆炸式增长&#xff0c;其能源消耗与碳排放问题日益凸显。根据最新统计&#xff0c;全球数据中心年耗电量已达4600亿度&#xff0c;占全球总用电量的2%。随着大语言模型…...