vue地区选择组件教程详解
作者：焙烤汉堡 发布时间：2023-07-02 16:49:48
标签：vue,地区,选择,组件
概述
主要用于全国地区数据的操作，包括省，市，区 * 联动，地区数据的添加和删除； 在操作地区数据时，以前也用过树形的地区选择组件，但因其在再操作大量的地区数据时，渲染缓慢，所以我们就换了另一种数据展示形式和交互形式，从而就有了这个组件。
注意：该组件是 vue.js 组件
demo
抢鲜体验请点击这里 demo
API
Props
| 参数 | 类型 | 说明 |
|---|---|---|
| area | Array | 传入组件的地区的数据 |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
| selected | area | 组件中选中的地区 |
详细说明
Props
area
area 参数是必选项，表示组件初始化时的地区数据，可以为空。 area 是一个包含多个对象的数组，其中每个对象的数据结构如下:
...
area: [
{Name: '北京', ID: '01'},
{Name: '南京', ID: '0401'},
{Name: '西湖区', ID: '060105'}
],
...
因为后来在实际的使用中，发现有时候，后台只会返回一个地区的 ID 值，所以这里做了优化，可以只传入 ID 的值，比如这样：
...
area: [
{ID: '01'},
{ID: '0401'},
{ID: '060105'}
],
...
selected
selected 是由组件内部发布的一个事件，你可以在组件外面订阅这个事件，从而得到它返回的值，这个值就是组件当前选中的所有的地区，返回的这个值是由多个包含地区数据的对象组成的数组，数据结构和 area 参数一样
简单的例子
<div>
<addressmap :area="area" @selected="selected"></addressmap>
</div>
安装和使用
npm install adc-addressmap
若作为全局组件使用
//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
components: { Addressmap},
...
}
总结
以上所述是小编给大家介绍的vue地区选择组件教程详解网站的支持！
来源：https://juejin.im/post/5ae519706fb9a07abd0d6c52
0
投稿猜你喜欢
一、前言上一篇中我们已经知道了客户端通过socket来连接服务端，进行了一次数据传输，那如何实现客户端多次发生数据？而服务端接受多个客户端呢- 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载刷新整个页面，这使得程序能够更快地回应用户的操作，如下笔记将简单介
- 一、TensorFlow常规模型加载方法保存模型tf.train.Saver()类，.save(sess, ckpt文件目录)方法参数名称功
- 本文实例讲述了javascript使用Blob对象实现的下载文件操作。分享给大家供大家参考，具体如下：Blob对象前言环境操作总结Blob是
- actions异步修改状态与mutations同步修改状态是两个容易混淆的概念，因为两者在执行上，很难测试出两者的差别，而我们要区别它们两，
- vue使用formData传递文件类型的数据1.需求 传递文件类型的数据和其
- 本文实例讲述了python写xml文件的操作的方法，分享给大家供大家参考。具体方法如下：要生成的xml文件格式如下：<?xml ver
- 引文之前有一篇文章给大家带来了SQL注入的基本知识点以及分类，包含的面比较广但是不深入，于是我准备详细讲讲每一种类型的SQL注入的详细利用方
- 看到Python中有个函数名比较奇特,__init__我知道加下划线的函数会自动运行,但是不知道它存在的具体意义..Python中所有的类成
- 是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用
- 1：listWidget 以滚动窗口显示文件下的所有文件： self.listWidget = QtWidget
- 学生表：create table student( id number(8) primary key, name var
- 需要先装pywin32，windows下调用winapi的接口## _*_ coding:UTF-8 _*___author__ =
- 关于@property装饰器在Python中我们使用@property装饰器来把对函数的调用伪装成对属性的访问。那么为什么要这样做呢？因为@
- 本文内容皆为作者原创，码字不易，如需转载，请注明出处：https://www.cnblogs.com/temari/p/13048977.h
- 一 、python模块 xml.dom 解析XML的APIminidom.parse(filename)加载读取XML文件doc.docum
- 这篇文章主要介绍了Python assert关键字原理及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
- Python中str is not callable问题详解及解决办法问题提出： 在Python的代码，在运行过程中
- 解决MySQL中文乱码的问题看到从数据库中取出的数据全部是“？？？？？”，太让人郁闷了。网上有很多方法来解决这个问
- 一个站点成功与否，不是在于所用的程序语言是PHP还是ASP，也不在于用BLOG建站或是CMS建站，内容和专业很重要。博客很好起步，CMS体系
