省市区下拉选择:3个el-select(附完整代码+json)

目录

直接上做出的效果:

页面代码:

使用@click.native:

data及引入:

 初始化:

 methods:

JSON:

 示例结构:

1.code.json

 2.pca-code.json

回显:

视频效果:


直接上做出的效果:

页面代码:

下拉的@change事件因为只能得到绑定的val的改变,但是我想拿到里面的item并且能够回显。假如我们把item绑定到value上的话,el-select的回显是全等的,而我绑定了一个对象,回显肯定是有问题的哈。

使用@click.native:

@click.native 是一个修饰符,它允许你在组件的根元素上监听原生 DOM 事件。这个修饰符在 Vue 2.x 的某些场景中是有用的,特别是当你需要在一个封装了原生 DOM 元素的自定义组件上直接监听原生事件时。

            <el-col :span="24"><el-form-item label="省/市/区:" prop="provinceCode"><div class="setCity"><el-select placeholder="请选择省份" v-model="queryParams.provinceCode" clearable filterable @change="initProvince"><el-option v-for="(item, index) in provinceList" :key="index" :label="item.categoryName"  @click.native="provinceChange(item)":value="item.category"></el-option></el-select><el-select placeholder="请选择城市" v-model="queryParams.cityCode" clearable filterable @change="initCity"><el-option v-for="(item, index) in cityList" :key="index" :label="item.categoryName" @click.native="cityChange(item)":value="item.category"></el-option></el-select><el-select placeholder="请选择区县" v-model="queryParams.districtCode" clearable filterable><el-option v-for="(item, index) in areaList" :key="index" :label="item.categoryName" @click.native="changeDistrict(item)":value="item.category"></el-option></el-select></div></el-form-item></el-col>

Vue 2.x 中, .native 修饰符来明确告诉 Vue 你想要监听的是根 DOM 元素上的原生事件

Vue 3.x 中,.native 修饰符已经不再被推荐使用,因为 Vue 3 引入了 emits 选项来明确声明组件可以发出的事件,并且推荐使用 v-on 或 @ 监听组件发出的自定义事件,而不是根 DOM 元素上的原生事件。

假设我们有一个自定义的按钮组件(Button),该组件内部包含了一个原生的 <button> 元素。如果我们想要在使用这个按钮组件时直接监听它的点击事件,就可以使用 .native 修饰符:

<template>  <div>  <Button @click.native="handleClick"></Button>  </div>  
</template>  <script>  
export default {  methods: {  handleClick() {  console.log('Button clicked!');  }  }  
}  
</script>

在这个例子中,无论我们在 Button 组件内部如何组织元素,只要点击的是该组件的根 DOM 元素(即内部的 <button> 元素)就会触发 handleClick 方法

过度使用 .native 可能会导致代码的可读性和可维护性下降。在可能的情况下,应该优先考虑使用组件内部发出的自定义事件来通信。

data及引入:

引入json文件及定义初始数据:

import pcaCode from './code.json'
export default {name: '',components: {},data() {return {counts: 0,loading: false,queryParams: {page: 1,pageSize: 100},provinceList:[],cityList:[],areaList:[],rules: { }}},

 初始化:

拿到json赋值给省份

  created() {console.log(pcaCode,'llll');this.provinceList=pcaCodethis.getlist()},

 methods:

下面主要是对联动做了处理,省市区改变切换的时候进行触发主要是清除变省市区变更后保留的数据,切换时需要进行一个置空的操作,同时给后台的参数中也传了选择的省市区的名及码,传了码值就后台不用再次通过码值匹配了,但是前提是你给后台的要匹配上啊,给的数据也要正确

provinceChange(item,type){if(!item) returnthis.cityList=item.childrensthis.queryParams.provinceName=item.categoryNameif(!type) this.crealt()},cityChange(item,type){if(!item) returnthis.areaList=item.childrensthis.queryParams.cityName=item.categoryNameif(!type) this.queryParams.districtCode=null},changeDistrict(item){this.queryParams.districtName=item.categoryName},initProvince(val){if(!val){this.cityList=[]this.areaList=[]this.crealt()}},initCity(val){if(!val){this.areaList=[]this.queryParams.districtCode=null}},crealt(){this.queryParams.cityCode=nullthis.queryParams.districtCode=null}

JSON:

下面提供了两种json文件,分别示例了里面的结构,看自己使用哪个吧,但是因为文件只能绑定一个,我在这上传了两种种的code.json,都包含了码值(代码使用的是code.json)。

使用json的好处就是不用调接口了,减少了部分对后台的请求,个人认为的话,能减少后台压力就减少,但是呢,缺点也显而易见了,假如更新了或者加了些,可能找不到或者回显失败。json的话是死的数据,就是需要前端维护

 示例结构:

1.code.json
//code.json  对应上面图中的1小时前发布的
[{"level": 1,"category": "110000","categoryName": "北京市","parentCategory": null,"childrens": [{"level": 2,"category": "110100","categoryName": "北京市","parentCategory": "110000","childrens": [{"level": 3,"category": "110101","categoryName": "东城区","parentCategory": "110100","childrens": null},{"level": 3,"category": "110102","categoryName": "西城区","parentCategory": "110100","childrens": null},
//...
 2.pca-code.json
//pca-code.json 对应上面图中的50秒前发布的[{"code": "11","name": "北京市","children": [{"code": "1101","name": "市辖区","children": [{"code": "110101","name": "东城区"},{"code": "110102","name": "西城区"},{"code": "110105","name": "朝阳区"},{"code": "110106","name": "丰台区"},//...

回显:

需要重新给下拉附上新的list:

        this.provinceList.forEach(ele=>{if(ele.category==this.queryParams.provinceCode){this.provinceChange(ele,1)this.cityList.forEach(v=>{if(v.category==this.queryParams.cityCode){this.cityChange(v,1)}})}})

视频效果:

ok,这样就结束了哈,如有问题希望可以打在评论上哈,谢谢。

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

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

相关文章

安装jfrog container registry(jcr)

1、下载软件 下载地址,本案例下载的是jfrog-artifactory-jcr-7.59.11-linux.tar.gz: https://releases.jfrog.io/artifactory/bintray-artifactory/org/artifactory/jcr/jfrog-artifactory-jcr/ 2、解压下载下来的压缩包 tar zxf jfrog-artifactory-jcr-7.59.11-linux.tar…

开思通智网-快讯20240617:尖端芯片给AI装上“超级引擎”

【开思通智网-快讯20240617】 【新进展】 尖端芯片给AI装上“超级引擎” https://news.sciencenet.cn/htmlnews/2024/6/524611.shtm 国内首个渔业大模型范蠡大模型1.0发布 https://tech.opensnn.com/chip/article/2775682 武汉理工大学研制出水系锌离子电池&#xff1a;安全、…

如果xml在mapper目录下,如何扫描到xml

如果xml在mapper目录下,如何扫描到xml 项目结构 src├── main│ ├── java│ │ └── com│ │ └── bg│ │ ├── Application.java│ │ ├── domain│ │ │ └── User.java│ │ …

【Linux】Xshell和Xftp简介_安装_VMware虚拟机使用

1、简介 Xshell简介 Xshell是一款强大的安全终端模拟软件支持SSH1、SSH2以及Microsoft Windows平台的TELNET协议。该软件通过互联网实现到远程主机的安全连接&#xff0c;并通过其创新性的设计和特色帮助用户在复杂的网络环境中高效工作。Xshell可以在Windows界面下访问远端不…

电脑怎么卸载软件?多个方法合集(2024年新版)

在电脑的日常使用中&#xff0c;我们经常需要安装各种软件来满足不同的需求&#xff0c;但随着时间的推移&#xff0c;可能会出现一些软件不再需要或需要更换的情况。此时&#xff0c;及时从电脑上卸载这些不必要的软件是非常重要的。它不仅可以释放硬盘空间&#xff0c;还可以…

顶级管理者的新视角:管理状态而非时间

在快节奏的商业环境中&#xff0c;时间管理常被看作是提升效率和效果的关键因素。然而&#xff0c;对于顶级管理者来说&#xff0c;仅仅管理时间可能并不足够。一个更深层、更全面的管理方式——管理状态&#xff0c;正在成为新的趋势。在这篇文章中&#xff0c;我们将探讨为什…

微信小程序请求服务器报ERR_CONNECTION_RESET

排查思路 1.域名是否配置或跳过 2.域名是否备案 3.证书是否有效 4.服务器中间件配置证书是否生效 5.服务器中间件转发配置是否生效 6.接口是否正常 本人遇到问题描述&#xff0c;通过浏览器访问本人网站&#xff0c;https&#xff0c;get请求可以通&#xff0c;小程序wx…

mac nvm的使用

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理多个Node.js版本的工具&#xff0c;它允许你在全局范围内安装和切换不同版本的Node.js。以下是如何在macOS上使用nvm的基本步骤&#xff1a; 安装 nvm 安装 Homebrew&#xff08;如果尚未安装&#xff09;&…

MPLS TE简介

定义 MPLS TE&#xff08;MPLS Traffic Engineering&#xff09;&#xff0c;即MPLS流量工程。MPLS流量工程通过建立基于一定约束条件的LSP隧道&#xff0c;并将流量引入到这些隧道中进行转发&#xff0c;使网络流量按照指定的路径进行传输&#xff0c;达到流量工程的目的。 …

泰克DPO4104示波器

特色&#xff1a; Inspector智能存储管理 2.串行触发和分析 3.10.4”较大的显示器, 板上USB和CompactFlash端口, 及TekVPI?改善的探头接口, 较强的操作渐 变性 商品名称 &#xff1a;DPO4104数字荧光示波器 商品型号 &#xff1a;泰克DPO4104 商品简介 &#xff1a;1GHz带宽…

细节控-java删除文件

file.delete() vs Files.deleteIfExists(file.toPath()) 区别 在Java中&#xff0c;删除文件有多种方法&#xff0c;其中常见的两种方法是使用 File 类的 delete() 方法和 Files 类的 deleteIfExists() 方法。以下是这两种方法的详细比较和使用说明。 file.delete() 方法签名…

nginx配置解释

Nginx配置文件是Nginx服务器的核心&#xff0c;用于控制其行为和服务功能。下面是对Nginx配置文件和配置项的解释&#xff1a; 1. 主配置文件结构 Nginx的主配置文件通常位于/etc/nginx/nginx.conf或/usr/local/nginx/conf/nginx.conf&#xff0c;它由几个主要部分组成&#…

欧盟CE认证 包过亚马逊 方华快捷办理 价格三位数

什么是CE证书 CE证书是欧洲共同体&#xff08;European Community&#xff09;规定的产品合格性认证&#xff0c;全称为“Conformit Europene”&#xff0c;意为“欧洲合格性”。在欧洲经济区内销售的产品&#xff0c;必须符合欧洲的相关法律法规和标准&#xff0c;而获得CE证…

剪画小程序:音频混音攻略:从新手到高手的必备方法!

在我们欣赏他人发布的视频时&#xff0c;常常会留意到除了清晰的人声&#xff0c;还有相得益彰的背景音乐。 这些背景音乐并非录制时同步播放&#xff0c;而是后期添加而成。那究竟怎样给音频添加背景音乐呢&#xff1f; 今天&#xff0c;小编为大家整理了几种实用方法&#xf…

【Docker安装】Ubuntu系统下部署Docker环境

【Docker安装】Ubuntu系统下部署Docker环境 前言一、本次实践介绍1.1 本次实践规划1.2 本次实践简介二、检查本地环境2.1 检查操作系统版本2.2 检查内核版本2.3 更新软件源三、卸载Docker四、部署Docker环境4.1 安装Docker4.2 检查Docker版本4.3 配置Docker镜像加速4.4 启动Doc…

【Unity】实现分屏开发

前言&#xff1a; 最近有个项目二期需要做分屏开发&#xff0c;今天恰好研究一下为后续的项目做个准备。 原理 整体的实现还是蛮简单的&#xff0c;主要是通过camera的一个targetDisplay属性进行设置 可以看到unity支持最多八个分屏 实现 场景搭建 &#xff0c;这里直接使…

ArrayDeque详解(含动画演示)

目录 ArrayDeque详解1、 ArrayDeque的继承体系2、Queue和Deque接口的区别3、 ArrayDeque的数据结构4、ArrayDeque的构造方法5、 ArrayDeque的addFirst方法6、 ArrayDeque的addLast方法7、 ArrayDeque的如何利用head和tail索引实现环形数组8、 ArrayDeque的doubleCapacity方法&a…

20. mediasoup服务器的布署与使用

Mediasoup Demo部署 架构服务分析 服务端提供3个服务&#xff1a; 1.www服务&#xff0c;浏览器通过访问服务器目录获取客户端代码&#xff0c;通过V8引擎&#xff0c;启动底层WebRTC 2.nodejs提供websocket服务和http服务&#xff0c;用于信令交互 3.Mediasoup C提供的流媒体…

Java中的内存泄漏问题解析与应对

Java中的内存泄漏问题解析与应对 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java应用开发中&#xff0c;内存泄漏是一个常见但又十分棘手的问题。它会导…

逆向学习Windows篇:通过编写函数处理菜单消息

本节课在线学习视频&#xff08;网盘地址&#xff0c;保存后即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/27ab8558281e​​ 在Windows应用程序开发中&#xff0c;菜单是用户界面的重要组成部分&#xff0c;它提供了用户与应用程序交互的途径。处理菜单…