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

<template><el-form ref="form" :model="form" label-width="80px"><el-form-item label="地址:" prop="addressList"><el-cascaderv-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的文件也已经上传,查看文章顶部下载。
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

封装uniapp签字板

新开发的业务涉及到签字功能&#xff0c;由于是动态的表单&#xff0c;无法确定它会出现在哪里&#xff0c;不得已封装模块。 其中涉及到一个难点就是this的指向性问题&#xff0c; 第二个是微信小程序写法&#xff0c; 我这个写法里用了u-view的写法&#xff0c;可以自己修改组…

Android Studio修改创建新布局时默认根布局

将Android Studio默认布局ConstraintLayout切换成LinearLayout 打开设置&#xff0c; Editor> File and Code Templates > Other > layoutResourceFile.xml 备注&#xff1a;创建时提示根布局仍然为ConstraintLayout&#xff0c;不用管这个&#xff0c;实际创建的…

【Linux系统化学习】进程终止的奥秘

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Liunx系统化学习 代码仓库&#xff1a;Gitee 目录 获取函数返回值 退出码 进程退出的场景 错误码 信号终止异常代码 进程的终止 main函数直接return exit函数 _exit函数 获取函数返回值 在C语言学…

测试开发工具推荐(含自动化、性能、稳定性、抓包)

今天将给大家推荐14款日常工作中经常用到的测试开发工具神器&#xff0c;涵盖了自动化测试、APP性能测试、稳定性测试、抓包工具等。 一、UI自动化测试工具 1. uiautomator2 Github地址 https://github.com/openatx/uiautomator2 介绍&#xff1a; openatx开源的ui自动化…

Vscode新手安装与使用

安装与版本选择 VS Code 有两个不同的发布渠道&#xff1a;一个是我们经常使用的稳定版&#xff08;Stable&#xff09;&#xff0c;每个月发布一个主版本&#xff1b;另外一个发布渠道叫做 Insiders&#xff0c;每周一到周五 UTC 时间早上6点从最新的代码发布一个版本&#x…

nginx+rsyslog+kafka+clickhouse+grafana 实现nginx 网关监控

需求 我想做一个类似腾讯云网关日志最终以仪表方式呈现&#xff0c;比如说qps、p99、p95的请求响应时间等等 流程图 数据流转就像标题 nginx ----> rsyslog ----> kafka —> clickhouse —> grafana 部署 kafka kafka 相关部署这里不做赘述&#xff0c;只要创…

无需翻墙|Stable Diffusion WebUI 安装|AI绘画

前言 最近终于有机会从围墙里往外看&#xff0c;了解到外面的世界已经有了天翻地覆的变化&#xff0c;感叹万千&#xff0c;笔者在本地mac&#xff0c;windows&#xff0c;linux&#xff0c;docker部署了不下20遍后&#xff0c;整理出来的linux极简避坑安装方案&#xff0c;供…

机器学习距离度量方法

1. 机器学习中为什么要度量距离&#xff1f; 机器学习算法中&#xff0c;经常需要 判断两个样本之间是否相似 &#xff0c;比如KNN&#xff0c;K-means&#xff0c;推荐算法中的协同过滤等等&#xff0c;常用的套路是 将相似的判断转换成距离的计算 &#xff0c;距离近的样本相…

Docker 入门 ------ 基本命令

1. 使用Docker镜像 1.1 获取镜像 主要命令: docker pull NAME[:TAG] NAME 为镜像名称&#xff0c;后跟:版本号&#xff0c;如果没有跟后面的版本号&#xff0c;默认拉取最新的稳定版本 例子&#xff1a; 上述命令相当于&#xff1a;docker.io/library/ubuntu:latest 1.2 查…

音频、视频插头

音频、视频插头 常用电子元器件类型 2.5音频插头电源插座 \DC插头电源插座 文章目录 音频、视频插头前言一、音频、视频插头二、电源插座2.5音频插头电源插座DC插头电源插座总结前言 根据设计和用途不同,支持不同的音频或视频传输标准和分辨率。选择适当的音频和视频插头需…

Power BI - 5分钟学习合并文件

每天5分钟&#xff0c;今天介绍Power BI合并文件 什么是合并文件&#xff1f; 合并文件就是将具有相同架构的多个文件合并到单个逻辑表中。 如果要合并同一文件夹中的所有文件时&#xff0c;此功能非常有用。 例如&#xff0c;如果你有一个文件夹&#xff0c;其中包含公司的所…

饥荒Mod 开发(二五):常用组件 总结

饥荒Mod 开发(二四)&#xff1a;制作一把万能工具 在前面的文章介绍了很多和饥荒相关的知识点&#xff0c;做了很多有趣的东西&#xff0c;接下来简单做个总结&#xff0c;总结一下组件的用法 组件用法 一个预制物可以添加多个组件&#xff0c;每个组件会有自己的功能&#x…