vue-area-linkage Vue省市区三级列表联动插件使用

Posted zjx304

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-area-linkage Vue省市区三级列表联动插件使用相关的知识,希望对你有一定的参考价值。

官方演示地址

     // v5及之后的版本 数据依赖于area_data
        npm i --save vue-area-linkage area-data
        import Vue from ‘vue‘;
        import { pca, pcaa } from ‘area-data‘; // v5 or higher
        import ‘vue-area-linkage/dist/index.css‘; // v2 or higher
        import VueAreaLinkage from ‘vue-area-linkage‘;

        Vue.use(VueAreaLinkage)
        // 使用
        // v5及之后的版本
        <area-select v-model="selected" :data="pca"></area-select> // 省市
        <area-select v-model="selected" :data="pcaa"></area-select> // 省市区:
        <area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
        <area-cascader v-model="selected2" :data="pcaa"></area-cascader> // 省市区:

        //setting
        <area-select type=‘all‘ :level=‘2‘ v-model="selected" :data="pcaa"></area-select>
        <area-cascader type=‘all‘ v-model="selected2" :level=‘1‘ :data="pcaa"></area-cascader>

下面个人信息页面使用三级列表demo

 

 

 

 

文档地址

以上是关于vue-area-linkage Vue省市区三级列表联动插件使用的主要内容,如果未能解决你的问题,请参考以下文章

前端vue三级联动组件之vue-area-linkage

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

解决vue-area-linkage 无法回显的bug

省市区三级联动(vue)