elementui 中使用三级联动

1、安装库

 npm install element-china-area-data -S //安装

2、解释说明

//regionData 是省市区三级联动数据（不带“全部”选项）

//CodeToText 是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市

//TextToCode  后台省市区显示再页面转code，

//TextToCode['广东省'].code， TextToCode['广东省']['深圳市'].code,

//TextToCode['广东省']['深圳市']['福田区'].code,分别是省市区code

3、代码示例

     

        :options="areaSelectData"

        @change="handleChange"

        class="full-width"

        size="large"

        v-model="form.selectedOptions"

        placeholder="请选择您所在的城市"

          />

 

import { regionData, CodeToText, TextToCode } from "element-china-area-data";

data(){

  return{

    areaSelectData: regionData,//省市区三级联动数据

  }

}

  showEditDialog(row) {//showEditDialog为点击编辑数据显示的按钮

      this.getList();

      this.dialogConsignee = true;

      this.form.selectedOptions = [

        TextToCode[this.list.province].code,

        TextToCode[this.list.province][this.list.city].code,

        TextToCode[this.list.province][this.list.city][this.list.area].code,

      ];

    },

handleChange(value) {

      //value为省市区code数组

      if (value) {

        var provinceCode = CodeToText[value[0]];//code转为省

        var cityCode = CodeToText[value[1]];//市

        var orgion = CodeToText[value[2]];//区

        this.form.province = provinceCode;

        this.form.city = cityCode;

        this.form.area = orgion;

        // this.form.selectedOptions = provinceCode + cityCode + orgion;

      }

  },