vue的省市区选择 vue-area-linkage

Myth丶恋晨 2023-02-25 02:20 11阅读 0赞

# vue的省市区选择 vue-area-linkage #

> 使用文档地址：https://www.npmjs.com/package/vue-area-linkage

安装依赖包：

npm i --save vue-area-linkage area-data

在main.js里调用

import VueAreaLinkage from 'vue-area-linkage'
    
    // 全局引用样式
    import 'vue-area-linkage/dist/index.css'
    Vue.use(VueAreaLinkage)

在要使用组件的地方调用

// 局部引入样式
    import 'vue-area-linkage/dist/index.css'
    import {  pca, pcaa } from 'area-data'

data中需要定义的变量

data () {
        return {
    		pca: pca,
    		pcaa: pcaa
    	}
    }

## 调用的方式： ##

### 方式一：只有一个下拉选择框 ###

选择的内容放在里面。例如：`天津市/市辖区/河东区`

<area-cascader :level="1" type="text" placeholder="请选择地区" v-model='form.address' :data="pcaa"></area-cascader>

### 方式二：省市 ###

<area-cascader v-model="selected2" :data="pcaa"></area-cascader>

### 方式三：三级联动 ###

> searchData：接口参数，用户选择的内容直接同步到 searchData 中

<div class="wrap_area_select">
        <span class="Names">地区:</span>
        <area-select
            style="display: flex"
            type="all"
            v-model="searchData.areaList"
            :level="2"
            :disableLinkage="linkage"
            :data="pcaa"
        ></area-select>
    </div>

<area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>

### 方式四：二级联动 ###

<area-select type='all' :level='1' v-model="selected" :data="pcaa"></area-select>

## 修改样式： ##

.area-select.large{ 
      width: 100%;
      line-height: 20px;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue省市区三级联动

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小咪咪/ 2023年06月27日 06:23/ 0 赞/ 31 阅读

相关 vue mint-ui省市区选择器

首先引入mint-ui组件库具体步骤可以查看[查看组件库][Link 1] 我们这里用到Popup和picker这两个组件建立一个addressPopupTool.vue

叁歲伎倆/ 2023年06月26日 11:00/ 0 赞/ 8 阅读

相关使用vant完成 Area省市区选择。

效果展示： ![2019102918293848.gif][] 组件使用的文件： area.js文件。[area.js文件详见][area.js] 注意：记得在ma

待我称王封你为后i/ 2023年06月11日 07:25/ 0 赞/ 305 阅读

相关省市区

1 下载 npm install v-distpicker --save 全局引入 import Distpicker from 'v-distp

清疚/ 2023年03月01日 13:58/ 0 赞/ 46 阅读

相关 vue的省市区选择 vue-area-linkage

vue的省市区选择 vue-area-linkage > 使用文档地址：https://www.npmjs.com/package/vue-area-linkage 安

Myth丶恋晨/ 2023年02月25日 02:20/ 0 赞/ 12 阅读

相关 VUE3.0学习系列随笔（十）：省市区选择组件

VUE3.0学习系列随笔（十）：省市区选择组件 1、数据来源使用的依赖数据为：`element-china-area-data`，总共有六种数据模式详情请参

古城微笑少年丶/ 2022年10月28日 01:29/ 0 赞/ 346 阅读

相关 vue-area-linkage 省市区Vue组件

场景组件安装例子场景一般的站点都会用到的，eg:标记某个用户的地址属

叁歲伎倆/ 2022年05月17日 13:09/ 0 赞/ 81 阅读

相关获取SQLLite省市区数据库中省市区数据的方法

在我上传的资源中有[SQLLite版全国省市区的数据库][SQLLite]，现在我来介绍下我开发地址列表时获取省市区数据时的方法。废话少说，代码如下所示： package

灰太狼/ 2022年01月09日 11:13/ 0 赞/ 521 阅读

相关获取SQLLite省市区数据库中省市区数据的方法

在我上传的资源中有[SQLLite版全国省市区的数据库][SQLLite]，现在我来介绍下我开发地址列表时获取省市区数据时的方法。废话少说，代码如下所示

Dear 丶/ 2021年12月24日 04:27/ 0 赞/ 608 阅读

相关 VUE省市区三级联动

使用步骤： 1、下载依赖 cnpm install v-distpicker --save 2、配置与引入，在main.js中写： import Di

ゝ一世哀愁。/ 2021年11月26日 14:04/ 0 赞/ 715 阅读