使用element中el-cascader级联选择器实现省市区街道筛选(非动态加载)

<template>
	<el-form ref="form" :model="form" label-width="80px">
	   <el-form-item label="地址:" prop="addressList">
		     <el-cascader
			     v-model="form.addressList"
			      :props="props"
			      :options="options"  
			       style="width:100%;">
		     </el-cascader>
	   </el-form-item>
	</el-form>
</template>
<script>
// 导入相关json数据
import {
    allAddressList
} from "./common/area";

  export default {
    data() {
      return {
        props:{
            label:'name', //指定选项标签为选项对象的某个属性值
            value:'name', //指定选项的值为选项对象的某个属性值
         },
         //可选项数据源,键名可通过 Props 属性配置
        options:[],
        form: {
            addressList:[], //获取到的格式大致如下: [北京市,市辖区,东城区,交道口街道],
        }
      }
    },
    created() {
        this.addressData();
    },
    methods: {
	    addressData(){
	    //  省市区街道4级相关数据引入
         this.options = allAddressList();
	    },
    }
  }
</script>

注意:geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/; area.js的文件也已经上传,查看文章顶部下载。
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

golang第一卷---go入门

go入门 对于使用go的好处环境变量配置开发工具 参考网站 &#xff1a;go入门 对于使用go的好处 简单好记的关键词和语法。轻松上手&#xff0c;简单易学。更高的效率。比Java&#xff0c;C等拥有更高的编译速度&#xff0c;同时运行效率媲美C&#xff0c;同时开发效率非常高。…

分布式技术之数据分布方式

文章目录 数据分布设计原则数据分布方法哈希一致性哈希带有限负载的一致性哈希带虚拟节点的一致性哈希四种数据分布方法对比 在分布式系统中&#xff0c;具体是如何实现数据索引或数据分布的呢&#xff1f;目前最常用的方法就是哈希和一致性哈希。 数据分布设计原则 数据分布…

swift-碰到的问题

如何让工程不使用storyboard和scene 删除info.plist里面的Application Scene mainifest 删除SceneDelegate.swift 删除AppDelegate.swift里面的这两个方法 func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession…

2012年第一届数学建模国际赛小美赛B题大规模灭绝尚未到来解题全过程文档及程序

2012年第一届数学建模国际赛小美赛 B题 大规模灭绝尚未到来 原题再现&#xff1a; 亚马逊是地球上现存最大的雨林&#xff0c;比地球上任何地方都有更多的野生动物。它位于南美洲大陆的北侧&#xff0c;共有9个国家&#xff1a;巴西、玻利维亚、厄瓜多尔、秘鲁、哥伦比亚、委…

竞赛保研 基于卷积神经网络的乳腺癌分类 深度学习 医学图像

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

ppp会话建立的第二阶段:ppp认证

ppp认证的两种协议&#xff1a; pap 密码认证协议&#xff1a;是一种简单的明文认证&#xff0c;使用两次握手建立身份验证。如果碰到动态攻击&#xff0c;pap认证不会断开。一旦pap认证通过&#xff0c;就不会断开chap 挑战握手验证协议&#xff1a;通过三次握手的方式进行MD…

redis的主从复制和哨兵模式

redis的集群&#xff1a; 高可用方案&#xff1a; 持久化高可用 主从复制 哨兵模式 集群 主从复制&#xff1a;主从复制是redis实现高可用的基础&#xff0c;哨兵模式和集群都是在主从复制的基础之上实现高可用。 主从复制实现数据的多机备份&#xff0c;以及读写分离(主…

强化学习第一课 Q-Learning

解决问题&#xff1a;从任何位置到6 视频课程地址&#xff1a; 强化学习算法系列教程及代码实现-Q-Learning_哔哩哔哩_bilibili 相应代码&#xff1a; import numpy as np import randomq np.zeros((7, 7)) q np.matrix(q)r np.array([[-1, -1, -1, 0, -1, -1, -1],[-1, …

SpringBoot 日志打印

一. 自定义打印日志 开发者自定义打印日志实现步骤: • 在程序中得到日志对象 • 使用日志对象的相关语法输出要打印的内容. 得到日志对象: //日志工厂需要将需要打印的类的类型传递进去,这样我们才知道日志的归属类,才能更方便的定位到文体类 private static Logger logger …

Vue模板编译

Vue模板编译 Vue生命周期中&#xff0c;在初始化阶段各项工作做完之后调用了vm.$mount方法&#xff0c;该方法的调用标志着初始化阶段的结束和进入下一个阶段&#xff0c;从官方文档给出的生命周期流程图中可以看到&#xff0c;下一个阶段就进入了模板编译阶段(created和befor…

ssm基于web的马病管理系统设计与实现+jsp论文

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;马病信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广大…

基于OpenAI的Whisper构建的高效语音识别模型:faster-whisper

1 faster-whisper介绍 faster-whisper是基于OpenAI的Whisper模型的高效实现&#xff0c;它利用CTranslate2&#xff0c;一个专为Transformer模型设计的快速推理引擎。这种实现不仅提高了语音识别的速度&#xff0c;还优化了内存使用效率。faster-whisper的核心优势在于其能够在…

【网络安全】upload靶场pass1-10思路

目录 Pass-1 Pass-2 Pass-3 Pass-4 Pass-5 Pass-6 Pass-7 Pass-8 Pass-9 Pass-10 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1…

【六袆 - Framework】vue3入门;vue框架的特点矩阵列举;Vue.js 工作原理

vue框架的特点 Vue.js的特点展开叙述Vue.js的工作原理展开叙述 官方文档&#xff1a; https://cn.vuejs.org/guide/introduction.html Vue.js的特点 ┌────────────────────┬────────────────────────────────────…

一款超酷的一体化网站测试工具:Web-Check

Web-Check 是一款功能强大的一体化工具&#xff0c;用于发现网站/主机的相关信息。用于检查网页的工具&#xff0c;用于确保网页的正确性和可访问性。它可以帮助开发人员和网站管理员检测网页中的错误和问题&#xff0c;并提供修复建议。 它只需要输入一个网站就可以查看一个网…

用友时空KSOA UploadImage存在任意文件上传漏洞

产品简介 用友时空KSOA是建立在SOA理念指导下研发的新一代产品&#xff0c;是根据流通企业最前沿的I需求推出的统一的IT基础架构&#xff0c;它可以让流通企业各个时期建立的IT系统之间彼此轻松对话&#xff0c;帮助流通企业保护原有的IT投资&#xff0c;简化IT管理&#xff0…

开放网络+私有云=?星融元的私有云承载网络解决方案实例

在全世界范围内的云服务市场上&#xff0c;开放网络一直是一个备受关注的话题。相比于传统供应商的网络设备&#xff0c;开放网络具备软硬件解耦、云原生、可选组件丰富等优势&#xff0c;对云服务商和超大型企业有足够的吸引力。 SONiC作为开源的网络操作系统&#xff0c;使得…

《A++ 敏捷开发》-2 改进从团队开始

上一章介绍了丰田方式水面下的七个习惯&#xff0c;但公司应如何有效开展与推行&#xff1f;有哪些误区要注意&#xff1f;我们先看美国东岸某家小印刷公司的故事。 美国费城Weisbord故事 60年代复印机还未普及&#xff0c;很昂贵&#xff0c;所以有不少公司专门为各类公司客…

python+django网上购物商城系统o9m4k

语言&#xff1a;Python 框架&#xff1a;django/flask可以定制 软件版本&#xff1a;python3.7.7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发工具pycharm/vscode都可以 前端框架:vue.js 系统使用过程主要涉及到管理员和用户两种角色&#xff0c;主要包含个…

什么是SSL证书?在哪里免费申请?

随着互联网蓬勃发展&#xff0c;人们在日常生活中越来越依赖网络。然而&#xff0c;网络攻击和数据泄露日益猖獗&#xff0c;保护网站和用户信息的安全变得尤为紧迫。在这一背景下&#xff0c;SSL证书成为至关重要的安全措施。 SSL证书的首要功能在于防范网络攻击。相较于不安全…