vue-elementui省市区三级选择器

最新推荐文章于 2024-07-18 09:36:19 发布

雨雨＃#雨雨

最新推荐文章于 2024-07-18 09:36:19 发布

阅读量5k

点赞数 1

分类专栏：笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_60508127/article/details/124987955

版权

笔记专栏收录该内容

48 篇文章 0 订阅

订阅专栏

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

 <el-form-item label="所在区域" prop="area">
      <el-cascader
         :options="areaSelectData"
         @change="handleChange"
         class="full-width"
         size="large"
         v-model="form.selectedOptions"
         placeholder="请选择您所在的城市"
          />
  </el-form-item>


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