纯前端实现城市的三级联动

文章目录

• • 概要
  • 整体流程

概要

城市三级联动的前端需求越来越多，今天就给宝子们分享一个纯前端实现三级联动的需求

整体架构流程

1.通过npm 下载 "element-china-area-data" ，（第三方插件）

在所需要的页面引入即可

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

2.通过在components中 新增一个文件夹 CascaderComponent.vue 

dikdi

<template>
    <div>
      <el-cascader :size="size" :options="options" v-model="provinces" @change="dynamicHandleChange" :placeholder="placeholder"
        :parameters="parameters"></el-cascader>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      size: {
        type: String,
        default: "small", // 默认大小为small
      },
      options: {
        type: Array,
        default: () => [], // 默认选项数据为空数组
      },
      placeholder: {
        type: String,
        default: "请选择省市区", // 默认提示文字为"请选择省市区"
      },
      parameters: {
        type: String,
        default: "code", // 默认为code值
      },
      selectValue: String,//model值
    },
    data() {
      return {
        provinces: [], // 选中的省市区数据，默认为空数组
      };
    },
    watch: {
      selectValue: {
        handler(newValue) {
          // 确保选择框中的值已经更新完成
          this.$nextTick(() => {
            this.provinces = newValue;
          });
        },
        immediate: true,
      },
    },
    methods: {
      dynamicHandleChange(e) {
        if (this.parameters == "name") {
          this.$emit("change", this.ideograph(e));
        } else {
          this.$emit("change", this.figure(e));
        }
      },
      // 传递中文数据
      ideograph(code) {
        const areas = [];
        if (Array.isArray(code) && code.length) {
          let region = this.options;
          for (let i = 0; i < code.length; i++) {
            const item = code[i];
            const found = region.find((regionItem) => regionItem.value === item);
            if (found) {
              areas.push(found.label); // 直接将中文推入数组中
              region = found.children || [];
              if (i === code.length - 1) {
                // 最后一个区域，可以打印或进行其他处理
              }
            } else {
              break;
            }
          }
        }
        return areas.join("/");
      },
      // 传递code数据
      figure(code) {
        return code.join("/"); 
      },
    },
  };
  </script>
  

接下来就是在需要的的页面引入就好

   <el-dialog title="提示" :visible.sync="visible">
      <cascader-component
        :selectValue="valueModel"
        :size="'medium'"
        :parameters="'code'"
        :options="regionData"
        :placeholder="'请选择城市'"
        @change="customChangeHandler"
      >
      </cascader-component>
    </el-dialog>

 接着就是引入  import { regionData } from "element-china-area-data";