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>
    
    
  • 相关阅读:
    ps制作gif
    安装pycocotools错误
    labelimg最新版本的使用攻略
    1_0day安全漏洞分析技术学习_二进制文件概述_笔记
    2.陈治瑄问题,汉字写入数据库报错。这个汉字有什么特殊的吗?
    1.PHP中报出use of undefined constant count
    [转] 关于Multi-head的为什么
    [转] GPT、GPT-2到GPT-3概览
    [转] RoBERTa介绍
    [转] ELMo原理解析及简单上手使用
  • 原文地址:https://www.cnblogs.com/userzf/p/15396618.html
Copyright © 2011-2022 走看看