Element UI 中国省市区级联数据

Question

Element UI 中国省市区级联数据

使用的是

 npm install element-china-area-data -S 

跑出外面了,外面的看不到了
官网的是这种效果,求解答

Answer 1

看看代码,正好我最近也使用了 很简单,但是他赋值的时候需要是地址编码,和后端约定好 还可以,不然很麻烦

一、
// 首先 引入
// 三联地址  三个方法 分别是(省市区JSON数据,省市区code码转地区文字,文字转code码)
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

二、
写入data数据
 // 三连地址 把数据写在data里面
      options: regionData,

三、
直接使用  v-model 这边 绑定的是一个code码,因为我有个需要展示的 所以在后面change中 根据需要处理了
          <el-cascader
              v-model="sel"
              size="large"
              style="width: 100%"
              :options="options"
              @change="handleChangeAddress"
            >
四、
在change事件中
因为默认值是code码,所以可以在change事件中,根据自己的需要处理

五、
change事件
    // 三联地址
    handleChangeAddress(value) {
      // 地区code码转换数据为中文
      this.form.province = CodeToText[value[0]]
      this.form.city = CodeToText[value[1]]
      this.form.district = CodeToText[value[2]]
    },

不是很全面,更加详细的信息,请查看element省市区级联选择器的 官网: https://www.npmjs.com/package/element-china-area-data