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>
相关推荐
键盘不能没有CV键1 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ2 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python2 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep3 小时前
【前端】前端运行环境的结构
前端
你的人类朋友3 小时前
【Node】认识multer库
前端·javascript·后端
Aitter3 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front4 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'5 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'5 小时前
css `dorp-shadow`
前端·css
流***陌5 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序