zoukankan      html  css  js  c++  java
  • vue 省市区

    使用步骤:

    1.

    npm install element-china-area-data -S

    2.

    import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

    ps:

    provinceAndCityData是省市二级联动数据(不带“全部”选项)
    regionData是省市区三级联动数据(不带“全部”选项)
    provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
    regionDataPlus是省市区三级联动数据(带“全部”选项)
    "全部"选项绑定的value是空字符串""
    CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市
    TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
     

    <template>
    <div id="app">
    <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="addressChange">
    </el-cascader>
    </div>
    </template>

    <script>
    import { regionData,CodeToText } from 'element-china-area-data'
    export default {
    data () {
    return {
    options: regionData,
    selectedOptions: []
    }
    },

    methods: {
    addressChange(arr) {
    console.log(arr);
    console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
    },
    }
    }

    https://blog.csdn.net/bamboozjy/article/details/82220894

  • 相关阅读:
    分布式缓存Redis的集群-主从复制
    搭建私有Nuget服务
    分布式缓存Redis的持久化方式RDB和AOF
    .Net Core使用分布式缓存Redis:Lua脚本
    .Net Core使用分布式缓存Redis:数据结构
    .Net Core使用分布式缓存Redis:基础
    Android基础开发归档
    gdb 调试
    linux shell 常用表达式汇总
    V8 data struct
  • 原文地址:https://www.cnblogs.com/wsj1/p/14914633.html
Copyright © 2011-2022 走看看