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>
相关推荐
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip7 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel7 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休8 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do8 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选8 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选8 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼8 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——8 小时前
前端登录鉴权详解
前端·javascript