vue和el-cascader选择地区3级联动

最新推荐文章于 2024-10-17 14:29:44 发布

原创最新推荐文章于 2024-10-17 14:29:44 发布 · 762 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何在项目中安装和使用ElementChinaAreaData库，包括设置不同版本的依赖，通过el-cascader实现省市区三级联动选择，以及在Vue组件中集成和触发联动事件的方法。

本文参考：element-china-area-data - npm

本文参考：http://t.csdnimg.cn/LL6Ax

1、安装组件依赖（默认是6.1.0版本，如果需要稳定下载5.02）

npm install element-china-area-data -S

npm install element-china-area-data@5.0.2 -S

2.使用（以下使用6版本，直接选择纯中文的，若使用地域代码options：regionData）

注意：如果使用5.0.2版本需要使用CodeToText 大写！！

import {
  regionData, // 省市区三级联动数据
  codeToText, // 这是6.1.0版本 5.0.2稳定版是CodeToText 小写的注意！
  pcaTextArr, // 省市区联动数据，纯汉字
  TextToCode, // 5.0.2可以使用 TextToCode['北京']
} from "element-china-area-data";

3、使用el-cascader标签

          <el-cascader
            style="width: 100%"
            :options="options"
            v-model="selectedOptions"
            @change="addressChoose"
          ></el-cascader>

4、data中定义元素

data(){
    return{
      options: pcaTextArr, // 省市区级联数据
      selectedOptions: [], // 选择的地区
    }
}

5、触发事件的函数方法

    /**省市区三级联动 */
    addressChoose(value) {
      console.log("##selectedOptions", value);
      this.form.purchaserArea = value[0] + "/" + value[1] + "/" + value[2];
      // 使用区域代码的时候
      // console.log(
      //   "省市区：",
      //   codeToText[value[0]],
      //   codeToText[value[1]],
      //   codeToText[value[2]]
      // );
    },