vue对地区数据的处理

vue城市搜索 实现: 子组件Alphabet.vue中的数据传递给子组件Cities.vue,兄弟组件之间的数据传参,可以通过父组件为媒介传递给另一个兄弟组件 子组件中通过this.$emit("自定义传递的名称","要传递的数据or方法")传递数据给父组件,父组件通过v-on:自定义传递的名称="自定义接收的名称"去接收数据or方法。 效果: 右侧字母列表为子组件Alphabet.vue,城市列表为子组件Cities.vue,当点击右侧列表中的字母时,城市列表会跳到对应的字母的城市,如点击B会跳转到B 子 阅读详情

转载于:https://segmentfault.com/a/1190000010873858
数据格式,但是不是根据A,B,C等排列的

这里写图片描述

methods:{
        getRegion(){
            let _this=this;
            axios.get('http://cangdu.org:8001/v1/cities?type=group',{})
            .then(
                ( resolve )=>{ 
                    console.log(resolve);_this.region = resolve
                }
            );
        }
    },
    computed:{
        getCityList(){
            var citylist = {};
            for(let i = 65; i <= 90; i++){
                 var num= String.fromCharCode(i);
                 citylist[num]=this.region[num];
            }
            return citylist
        }
    }

1.用axios封装了一个函数,获得数据
2.String.fromCharCode(i) 是把ascii码转成字符,所以num就是A,B,C,D..
3.computed 得到处理结束的getCityList

vant indexBar地区索引级联选择 要求:使用van组件的indexBar索引栏实现地区的三级联动效果。 效果: 思路: 1.修改vant组件的indexBar变成规定样式; 2.将组件写成循环现实,并添加点击事件; 3.点击事件: 判断是否点击的时索引栏的地区还是头部的选中地区,若点击的索引栏的地区,则把点击的地区赋给头部的地区进行显示;若点击的是头部的地区,则清空所点击的地区; 4.将要展示的地区数组根据首字母排序展示; 相关代码实现: 1. 样式框架 <div class="map-popup"& 阅读详情

相关推荐

基于Vue与Element UI实现手动三级联动地区选择功能

Element UI 是一个基于 Vue.js 的桌面端 UI 组件库,专为企业级应用而设计。它提供了丰富的组件库,包括按钮、表单、表格、弹窗、导航等常用 UI 元素,并支持响应式布局和国际化配置。本章将详细介绍 Element UI 的安装方式、核心组件的使用方法以及主题定制技巧,帮助开发者快速构建美观且功能强大的前端界面。Element UI 提供了丰富的组件库,以下介绍几个最常用的组件:el-buttonel-select和el-form,并展示其基本用法及数据绑定方式。

weixin_30205153的博客 858

vue插件集合17:vue获取国家以及地区的方法

<template> <div class="atnight"> <div class="topseach"> <form action="/"> <van-search v-model="searchVal" :placeholder="$t('auth.count')" show-action @search="onS...

jdBug 8222

vue省市区/县数据js文件(citydata.js)

可以通过该文件获取全国省市区/县的json数据信息,适合用于vue级联选择器获取数据使用。

vue获取用户当前城市 vue获取定位

新建一个js文件 里面写此代码 暴露function 注意这里的ak是秘钥.百度地图的秘钥 自己注册账号 根据相关操作获取 export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(win...

weixin_45842655的博客 5260

56个民族JS数据,可以直接转换成elementUi的多选器组件直接使用

民族数据,中英文!label-value{ value: 'Han', label: '汉族', }, { value: 'Mongol', label: '蒙古族', },

vue-element省市区三级json数据,及文字转成拼音

vue-element 省市区三级json数据, 及文字转换成拼音var PinYin = { "a": "\u554a\u963f\u9515", "ai": "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d", "an": "\u978d\u6c28\u5b89\u4ffa\u6309\u6697\u5cb8\u80fa\u6848\u8c19\u57ef\u63de\u72b4\u5eb5\u6849\u94f5\u9e4c\u9878\u9eef", "ang": "\u80ae\u6602\u76ce", "ao": "\u51f9\u6556\u71ac\u7ff1\u8884\u50b2\u5965\u61ca\u6fb3\u5773\u62d7\u55f7\u5662\u5c99\u5ed2\u9068\u5aaa\u9a9c\u8071\u87af\u93ca\u9ccc\u93d6", "ba": "\u82ad\u634c\u6252\u53ed\u5427\u7b06\u516b\u75a4\u5df4\u62d4\u8dcb\u9776\u628a\u8019\u575d\u9738\u7f62\u7238\u8307\u83dd\u8406\u636d\u5c9c\u705e\u6777\u94af\u7c91\u9c85\u9b43", "bai": "\u767d\u67cf\u767e\u6446\u4f70\u8d25\u62dc\u7a17\u859c\u63b0\u97b4", "ban": "\u6591\u73ed\u642c\u6273\u822c\u9881\u677f\u7248\u626e\u62cc\u4f34\u74e3\u534a\u529e\u7eca\u962a\u5742\u8c73\u94a3\u7622\u764d\u8228", "bang": "\u90a6\u5e2e\u6886\u699c\u8180\u7ed1\u68d2\u78c5\u868c\u9551\u508d\u8c24\u84a1\u8783", "bao": "\u82de\u80de\u5305\u8912\u96f9\u4fdd\u5821\u9971\u5b9d\u62b1\u62a5\u66b4\u8c79\u9c8d\u7206\u52f9\u8446\u5b80\u5b62\u7172\u9e28\u8913\u8db5\u9f85", "bo": "\u5265\u8584\u73bb\u83e0\u64ad\u62e8\u94b5\u6ce2\u535a\u52c3\u640f\u94c2\u7b94\u4f2f\u5e1b\u8236\u8116\u818a\u6e24\u6cca\u9a73\u4eb3\u8543\u5575\u997d\u6a97\u64d8\u7934\u94b9\u9e41\u7c38\u8ddb", "bei": "\u676f\u7891\u60b2\u5351\u5317\u8f88\u80cc\u8d1d\u94a1\u500d\u72c8\u5907\u60eb\u7119\u88ab\u5b5b\u9642\u90b6\u57e4\u84d3\u5457\u602b\u6096\u789a\u9e4e\u8919\u943e",

Vue实现省市区信息选择(附前端源码)

文章目录一、背景二、Cascader 级联选择器三、element-china-area-data省市区级联数据四、前端页面增加省市选择五、 实现效果六、 前端源码 一、背景 在电商平台中一般会有更新用户个人信息的模块(见下图),在这个功能中,系统会要求用户填写省市区信息及详细地址,便于订单的准确配送。本文将通过Vue+SpringBoot来具体实现用户所在省市区信息的选择与保存。 二、Cascader 级联选择器 用户在选择省市区时,一般会选择省,再选择地市,最后选择区或县市。对于这种数据集合有清

我的博客 7570

AD20/Altium designer——如何进行DRC检查、冲突的错误如何改正

对于一个画完的PCB,我们常常需要进行DRC检查,确保板子的电器连接及制作工艺在设定规则的范围内,本篇将介绍如何对PCB进行后期DRC检查处理,确保电路板出现不必要错误。 1.DRC检查入口 2.DRC设置 3.错误分析 对于错误的内容,依据个人实际情况不同,其出现的原因都是因为与设计规则中的设定标准冲突,这里按遇到的错误进行修改讲解,其他错误同理。 4.常见错误分析及解决方法 (1) 解决方法:将未连接网络连接(...

嵌入式创客工坊的博客 5万+

vue 中国省市区级联数据下拉工具

这是一个中国省市区连级数据下拉工具,可以获取行政区编码,也可以获取省市区的名称,具体的效果是下面的样子。这个工具使用起来也很简单。npm 网址: https://www.npmjs.com/package/element-china-area-data使用 npm 安装。 在需要使用连级选择的页面引入插件。 说明: 好了,具体可以看 npm 网站的案例。...

“跟他人学,和自己比” 2341

UE5 VlcMedia 插件编译与流媒体播放实战

本文详细介绍了在虚幻引擎5中编译并集成VlcMedia插件以解决流媒体播放难题的实战指南。针对UE5不再默认支持Win32 API导致的编译错误,文章提供了核心的构建配置文件修改步骤,并指导如何启用插件、创建VLC媒体播放器,最终成功播放如.m3u8等格式的网络直播流或点播视频。

weixin_29013129的博客 339

OTN设备核心知识速记

本文章为工作笔记,若有错误,还需大家指正。不定期更新。

Hiddengold的博客 2648

地区

做移动端用了有赞的地区列表选择器,但是跟后台element的地区数据不一样,需要把element的地区数据格式化成有赞的 项目引入 import { regionData } from “element-china-area-data”; data(){ diqu2:regionData, province:[], city:[], area:[] }, methods: { format(){ let province_list=[] let city_list=[] let city_list2=[]

叫我起来,我还能敲代码! 581

ARTIX-7 GTP 3G-SDI 工程构建与调试实战

本文详细介绍了基于ARTIX-7 FPGA和GTP收发器的3G-SDI工程构建与调试实战。从基础概念解析到Vivado工程创建、GTP IP核配置、SDI IP核集成,再到系统集成与时钟域处理,提供了全面的技术指导。文章还分享了调试技巧、常见问题排查方法以及性能验证步骤,帮助开发者快速掌握3G-SDI视频传输技术的实现与优化。

weixin_30443813的博客 256

vue中使用市区(地区)联动 复制三步完成

效果图 因联动数据较大 先写注册组件 一、引入注册组件 <template> <MyCity v-model="provAndCity" /> </template> <script> //引入联动子组件 import MyCity from './companys/citys.vue' export default { components: { MyCity }, data () { return { .

^_^ 1301

深入理解光流法外推雷达回波

背景介绍 鉴于本人实在太过疲惫和劳累,一些简单的便于理解的废话就不在记录,耗费两天时间研究了一下光流法,本帖用于记录学习过程中源码的难点细节。 使用光流预测的核心有两个利用多张连续回波图像(变分)或者相邻两张回波图(交叉相关,LK等)计算出光流场(速度矢量场),之后利用半拉格朗日方法进行外推。 半拉格朗日方法 三时间步半拉格朗日方法,其核心公式如下 但这个有点难理解,但看一维的图就很好理解 它的核心就是迭代求Am(位移矢量),如果理解困难的话,其实质上就是通过未来迭代(猜)出当前时刻的Am找到过去的假设

weixin_44695861的博客 6033

【虚幻引擎UE】UE5 阴影异常与优化

【虚幻引擎UE】UE5 阴影异常与优化解决方案合集

灵境引路人 3万+

Vue+ElementUI实现动态获取数据库中城市地区,按照字母顺序进行排序,并能根据当前地区筛选不同的活动

今天接到一个需求:要把地区中的死数据换成数据库中的地区,并且根据切换的地区展示不同的活动;但是数据库中并没有拼音这个字段,老板说新增一个拼音字段,在写个方法填进去就可以了,个人太懒了,就参考了这位博主的文章。并且根据切换地区不同展示不同的活动。

m0_57948069的博客 718

FPGA实现串口的任意字节数接收

基于FPGA的任意字节数(单字节、多字节)的串口(UART)接收,真的不来看看吗?

孤独的单刀 1万+

vue中级联选择器回填_vue项目中的element-ui地区级联选择器

在项目开发过程中遇到了需要用到element-ui的el-cascader地区级联选择的问题,做个笔记记录下。1.资源文件引入type="text/javascript"src="/static/test/lib/js/vue/vue-resource.js">2.新建选择器placeholder="请点击选择地址":options="options"v-model="selectedOption...

weixin_28802509的博客 594

【Flink】FlinkSQL如何触发执行计算

Table (通过 StatementSet.addInsert() 输出给某个 Sink)和 INSERT 语句 (通过调用 StatementSet.addInsertSql())会先被缓存到 StatementSet 中,StatementSet.execute() 方法被调用时,所有的 sink 会被优化成一张有向无环图。该方法是用来将一个表的内容插入到目标表中,一旦该方法被调用, TABLE API 程序立即被翻译。该方法是用来执行一个 SQL 语句,一旦该方法被调用, SQL 语句立即被翻译。

一杯咖啡半杯糖的博客 1006

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

在 Vue 项目中使用地区级联选

location: [] // 用于存储选择的地区编码数组})// 在 return 中返回数据return {locationOptions: regionData, // 地区数据。

weixin_68376171的博客 563

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue 组件分区域显示_vue地区选择组件教程详解

概述主要用于全国地区数据的操作,包括省,市,区三级联动,地区数据的添加和删除; 在操作地区数据时,以前也用过树形的地区选择组件,但因其在再操作大量的地区数据时,渲染缓慢,所以我们就换了另一种数据展示形式和交互形式,从而就有了这个组件。注意:该组件是 vue.js 组件demo抢鲜体验请点击这里 demoAPIProps参数类型说明areaArray传入组件的地区的数据Events事件名参数说明se...

weixin_39533052的博客 717

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Vue中如何进行表单地区选择与级联联动

在Vue中实现表单地区选择和级联联动是一个常见的需求。用户经常需要填写地区信息,而一个简单的选择框往往无法满足复杂的地区数据结构。下面将介绍如何使用Vue实现表单地区选择和级联联动。

程序员徐师兄的博客 994

vue项目省市区三级级联菜单的实现,现成的省市地区json数据拿去用

上图是省市级联菜单的效果图,省市地区的数据文件开发者可以下载直接使用 实现级联菜单 难点1:三个下拉框之间的关联问题,这里涉及到监听事件! 难点2:根据数据的结构,如何将地区数据对应到正确的下拉框位置上。 需要注意事项: 当用户选择了省/直辖市的内容后,市/区的下拉框内容会被更新,县/市的下拉框是暂时不变的。 当用户选择市/区的内容后,县/市的下拉框内容更新。 当用户 修改省/直辖市的内容后...

qq_38613992的博客 3696

vue+element+el-cascader 三级联动(省市区县)

我之前用过el-option来做三级联动,说实话还是有很大的区别,相比较option而言,cascader 更简单一些,但是也遇到了问题 我的页面代码是: <el-form-item label="收货地区:" prop="shdzDq"> <el-cascader ref="myCascader" v-model="province" :props="optionProps"

srz1128的博客 2294

vue-area-linkage实现省市区三级联动效果

return {address1: [], // 接收数据的对象pca: pca,pcaa: pcaa这样选择好的地区数据就会保存在address1中了,不过里面都是地区的编号 ,如果你需要向后端发送的地址是一个xx省xx市xx县的字符串数据,就下面这样做。

m0_60817860的博客 992
上一篇: 区别和详解:jQuery extend()和jQuery.fn.extend()
下一篇: 把一个数组拆分成元素为数组的数组(猴子吃香蕉)
han_hanker
博客等级 码龄13年 35粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值