zoukankan      html  css  js  c++  java
  • element省市区三级联动 Vue

    阅读NPM包介绍原文档

    插件包安装

    npm install element-china-area-data -S
    
    
    

    使用

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

    服务端用法:

    const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

    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="handleChange">
        </el-cascader>
      </div>
    </template>
     
    <script>
      import { regionData,CodeToText } from 'element-china-area-data'
      export default {
        data () {
          return {
            options: regionData,
            CodeToText: CodeToText,
            selectedOptions: []
          }
        },
     
        methods: {
          handleChange (value) {
            console.log(value)
            for (let i = 0; i < value.length; i++) {
              console.log(CodeToText[value[i]])
            }
          }
        }
      }
    </script>
    
    
  • 相关阅读:
    无旋转Treap简介
    bzoj 4318 OSU!
    bzoj 1419 Red is good
    bzoj 4008 亚瑟王
    bzoj 1014 火星人prefix
    更多的莫队
    bzoj 3489 A simple rmq problem
    洛谷 2056 采花
    NOIP 2017 游(划水)记
    UVa 11997 K Smallest Sums
  • 原文地址:https://www.cnblogs.com/userzf/p/15396618.html
Copyright © 2011-2022 走看看