其他分享
首页 > 其他分享> > element省市区三级联动 Vue

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>

标签:Vue,CodeToText,regionData,TextToCode,value,省市区,element,data
来源: https://www.cnblogs.com/userzf/p/15396618.html