这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

在写页面的时候,发现表单里面有一个省市区的 options 组件要写,因为表单很多地方都会用到这个地址选择,我便以为很简单嘛。

虽然很简单的一个功能,但是网络上能搜索到的教程大多都是需要配合 elementUI 等各种 UI 库的,但是我的项目并没有使用这些 UI 库,何况我只是想要拿到 一个地址字符串 而已,何必绑定 UI 库呢?

1、地址三级联动制作思路

思路其实很简单:

1、一个地图 json 数据

2、能够拿到 省份、市、区 的 options 数组来绑定就可以了

3、选择一个省份市,对应的市要变化;选择市时,对应的区要变化

这样的话,我们完全可以依赖 vue 强大的数据处理机制来解决

2、地图json

地图json数据我随便搜了一个: 中国省市区数据

3、vue setup 语法糖写法

我们点击上面的链接,下载了地图json数据,这里选择一个普通的就可以了,如图:

将文件命名为 area.json ,然后在项目中引入:

// 详细地址(省市区 详细地址)
import areaObj from '../../public/area.json';

第一步:首先是处理省份options数组(这里json地图是键名为省份):

// 省
const provinceArr = Object.keys(areaObj)
const province = ref(provinceArr[0])

这样就拿到了一个省份数组,这里随机默认选中第一个,北京市,这里 province 变量用来绑定输入框的值

第二步:处理市的数据,关键就是使用计算属性来监听 省份的变化,省份一改变,市的数据也会跟着改变:

// 市
const cityArr = computed(() => {
return Object.keys(areaObj[province.value])
})
const city = ref(cityArr.value[0]) // 监听省份变化
watch(province, (newVal) => {
city.value = Object.keys(areaObj[newVal])[0];
});

同样,这里的市默认选中第一个,city 也是双向绑定到 输入框, 为了能够在页面随时响应式改变,添加了一个watch 监听

第三步:处理区的数据

// 区
const areaArr = computed(() => {
return areaObj[province.value][city.value]
})
const area = ref(areaArr.value[0])
// 监听市变化
watch(city, (newVal) => {
area.value = areaObj[province.value][newVal][0]
})

这里同样默认选中第一个,当市变化时,区也会切换到对应的市区数据

4、效果

完美!

这样,就可以不借助任何第三方UI库,直接使用 vue 的计算属性和监听简单解决地图三级联动问题,就是数据的处理而已

以下是完整的代码:

其中 provinceArr、cityArr、areaArr 绑定options选项,province、city、area 绑定input 输入框

import { ref, computed, watch } from 'vue';
// 详细地址(省市区 详细地址)
import areaObj from '../../../../public/area.json'; // 省
const provinceArr = Object.keys(areaObj)
const province = ref(provinceArr[6])
// 市
const cityArr = computed(() => {
return Object.keys(areaObj[province.value])
})
const city = ref(cityArr.value[0])
// 监听省份变化
watch(province, (newVal) => {
city.value = Object.keys(areaObj[newVal])[0];
});
// 区
const areaArr = computed(() => {
return areaObj[province.value][city.value]
})
const area = ref(areaArr.value[0])
// 监听市变化
watch(city, (newVal) => {
area.value = areaObj[province.value][newVal][0]
}) // 详细地址
const detailArea = ref('')

本文转载于:

https://juejin.cn/post/7297983578548355099

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--vue3 setup 中国省市区三级联动options最简洁写法,无需任何库的更多相关文章

  1. java的JCombobox实现中国省市区三级联动

    源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...

  2. [moka同学转载]Yii2 中国省市区三级联动

    1.获取源码:https://github.com/chenkby/yii2-region 2.安装 添加到你的composer.json文件 "chenkby/yii2-region&qu ...

  3. Yii2 中国省市区三级联动

    1.获取源码:https://github.com/chenkby/yii2-region 2.安装 添加到你的composer.json文件 "chenkby/yii2-region&qu ...

  4. MVC和WebForm 中国省市区三级联动

    MVC和WebForm是微软B/S端的两条腿,两种不同的设计理念,相对来说MVC更优于WebForm对于大数据的交互,因为WebForm是同一时间传输所有数据,而MVC它只是传输所用到的数据,更精确, ...

  5. laraveladmin省市区三级联动

    Distpicker是一个中国省市区三级联动选择组件,这个包是基于Distpicker的laravel-admin扩展,用来将Distpicker集成进laravel-admin的表单中 安装 com ...

  6. vue 引用省市区三级联动(element-ui Cascader)

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

  7. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  8. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  9. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  10. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

随机推荐

  1. FreeSWITCH在session上执行定时挂机与取消

    操作系统 :CentOS 7.6_x64   FreeSWITCH版本 :1.10.9   日常开发中,会遇到需要在已存在的session上执行定时挂机和取消挂机的情况,今天整理下这方面的内容,我将从 ...

  2. java 注解结合 spring aop 实现日志traceId唯一标识

    MDC 的必要性 日志框架 日志框架成熟的也比较多: slf4j log4j logback log4j2 我们没有必要重复造轮子,一般是建议和 slf4j 进行整合,便于后期替换为其他框架. 日志的 ...

  3. 免费接口API

    前言 我们经常在不同的应用中见到镶嵌的本地地理位置气象信息,一般配合定位使用,即先获取用户位置,然后通过用户的区域请求免费的天气接口,获取气象数据,json解析后展示. 一,常用的三个接口 我常用的接 ...

  4. Android里使用AspectJ实现双击自定义注解

    创建注解 首先创建一个双击注解. import java.lang.annotation.ElementType; import java.lang.annotation.Retention; imp ...

  5. 面试官:你知道Comparable 和 Comparator 的区别吗?我:巴拉巴拉

    写在开头 面试官:"我们在Java的集合和数据结构中都离不开比较器,请你聊一聊Comparable 和 Comparator 这两种的区别吧" 内心活动:"上来就这么直接 ...

  6. leetcode 将有序数组转换为二叉搜索树

    给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树. 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树. 示例 ...

  7. 前端树形Tree数据结构使用-🤸🏻‍♂️各种姿势总结

    01.树形结构数据 前端开发中会经常用到树形结构数据,如多级菜单.商品的多级分类等.数据库的设计和存储都是扁平结构,就会用到各种Tree树结构的转换操作,本文就尝试全面总结一下. 如下示例数据,关键字 ...

  8. pycharm中如何改变主题

    这边分享一个我自己在用的主题,蛮简约的,关键字高亮显示.再也不用全都是一样的颜色了.网盘地址在最后哈 好了话不多说,教大家如何把主题设置到pycharm中 图1:首先把主题jar包下载下来,然后打开p ...

  9. Kotlin 函数 与 lambda 表达式

    一.函数 代码块函数体: fun sum(x: Int, y: Int): Int { return x + y } 表达式函数体: fun sum(x: Int, y: Int) = x + y 使 ...

  10. 【Azure 环境】IntelliJ IDEA Community Edition 2021.2.3登陆Azure账号时,无法切换到中国区

    问题描述 在IntelliJ IDEA Community Edition 2021.2.3中开发Azure Function程序,最后准备部署到中国区 Azure Function中.如下,在Int ...