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>
相关推荐
@PHARAOH9 分钟前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴11 分钟前
Android Studio新手开发第二十六天
android·前端·android studio
JH307335 分钟前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园1 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
麦麦大数据1 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang7272 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic2 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年2 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala2 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20082 小时前
前端-ES6-11
前端·es6