Vue组件省市区三级联动

npm安装

bash 复制代码
npm install element-china-area-data -S

vue组件

复制代码
创建addressCascader.vue文件

参数:

size: medium / small / mini

parameters: code/name(此处选中事件之后会将code、name都传)

bash 复制代码
<template>
    <div>
        <el-cascader :size="size" :options="options" v-model="provinces" @change="dynamicHandleChange" :placeholder="placeholder"
                     :parameters="parameters"></el-cascader>
    </div>
</template>

<script>
    export default {
        name: "addressCascader",
        props: {
            size: {
                type: String,
                default: "small", // 默认大小为small
            },
            options: {
                type: Array,
                default: () => [], // 默认选项数据为空数组
            },
            placeholder: {
                type: String,
                default: "请选择省市区", // 默认提示文字为"请选择省市区"
            },
            parameters: {
                type: String,
                default: "code", // 默认为code值
            },
            selectValue: {
                type: String,
                default: "",
            },
        },
        data() {
            return {
                provinces: [], // 选中的省市区数据,默认为空数组
            };
        },
        watch: {
            selectValue: {
                handler(newValue) {
                    // 确保选择框中的值已经更新完成
                    this.$nextTick(() => {
                        this.provinces = newValue.split("/");
                    });
                },
                immediate: true,
            },
        },
        methods: {
            dynamicHandleChange(e) {
                //此处可根据parameters区分code/name
                this.$emit("change", this.figure(e),this.ideograph(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>

引用

bash 复制代码
<template>
  <div>
    <cascader-component :selectValue="addr_code" :size="'medium'" :parameters="'code'" :options="regionData" :placeholder="'请选择城市'" @change="customChangeHandler">
    </cascader-component>
  </div>
</template>
<script>
import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      regionData: regionData,
      addr_code:''
    };
  },
  methods: {
    customChangeHandler(code,name) {
      this.addr_code = code
    },
  },
};
</script>
相关推荐
开开心心就好31 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享32 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js