vue-elementui省市区三级选择器

1.vue使用elementui的el-cascader

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

//regionData 是省市区三级联动数据（不带“全部”选项）
//CodeToText 是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
//TextToCode  后台省市区显示再页面转code，
//TextToCode['广东省'].code， TextToCode['广东省']['深圳市'].code,
//TextToCode['广东省']['深圳市']['福田区'].code,分别是省市区code

 
      
  


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;
      }
  },