element-ui 省市区插件

你的名字 2022-12-24 02:59 141阅读 0赞

插件官网 ：[https://www.npmjs.com/package/element-china-area-data][https_www.npmjs.com_package_element-china-area-data]

项目npm 下载组件   npm install element-china-area-data -S

### 一.在使用的页面中导入  ###

<el-form-item prop="areaCode" label="所在地区" :label-width="formLabelWidth">
              <el-cascader
                class="widthSmall"
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="addressChange">
              </el-cascader>
     </el-form-item>

import { regionData,CodeToText } from 'element-china-area-data'
    
      //data中定义参数
      data(){
          return{
           form:{},
           options: regionData, //省市区数据
           selectedOptions:[], // 选中的地区
          }
      },
       created() {
                // 初始化省市区
              this.selectedOptions = [this.form.provinceCode,this.form.cityCode,this.form.areaCode];
        },
    methods: {
    
    addressChange(arr) {
          var _this = this;
          console.log(arr);
          console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
          _this.form.provinceCode = arr[0];
          _this.form.cityCode = arr[1];
          _this.form.areaCode = arr[2];
      },
    }

[https_www.npmjs.com_package_element-china-area-data]: https://www.npmjs.com/package/element-china-area-data

发表评论取消回复

表情：

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

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

相关阅读

相关省市区

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

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

相关 element-ui 省市区插件

先安装 npm install element-china-area-data -S 一.在使用的页面中导入 <el-form-item prop="a

墨蓝/ 2023年01月02日 14:26/ 0 赞/ 169 阅读

相关 element-ui 省市区插件

插件官网：[https://www.npmjs.com/package/element-china-area-data][https_www.npmjs.com_packag

你的名字/ 2022年12月24日 02:59/ 0 赞/ 142 阅读

相关 uniapp 省市区插件

[region.json][] <template> <view class="region"> <picker mode="multiSele

我就是我/ 2022年09月02日 12:50/ 0 赞/ 253 阅读

相关中国省市区地址三级联动jQuery插件

中国省市区地址三级联动jQuery插件这个插件从[`https://www.jq22.com`][https_www.jq22.com]上下载的插件，并将我个人认为是

红太狼/ 2022年06月18日 13:15/ 0 赞/ 293 阅读

相关 vue省市区联动插件---distpicker

vue的省市区联动插件：[https://distpicker.iline.co/][https_distpicker.iline.co] ![Cente

矫情吗；*/ 2022年06月11日 08:38/ 0 赞/ 666 阅读

相关省市区地址三级联动jQuery插件Distpicker使用

插件下载地址 [http://www.jq22.com/jquery-info8054][http_www.jq22.com_jquery-info8054] 效果如

待我称王封你为后i/ 2022年06月04日 08:36/ 0 赞/ 287 阅读

相关仿京东省市区基于vue+elementui

效果是这个样子的![在这里插入图片描述][20190430104936876.gif] [点击跳转到github][github] [20190430104936876

阳光穿透心脏的1/2处/ 2022年04月25日 01:14/ 0 赞/ 262 阅读

相关中国省市区地址三级联动jQuery插件

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <script

Myth丶恋晨/ 2022年02月05日 04:11/ 0 赞/ 351 阅读

相关 jQuery中国省市区地址三级联动插件Distpicker

demo案例：[http://www.jq22.com/demo/jQueryDistpicker20160621/][http_www.jq22.com_demo_jQuer

以你之姓@/ 2021年11月24日 01:48/ 0 赞/ 476 阅读