使用element UI Cascader 级联选择器实现省/市/区选择

javascript 复制代码
<template>
  <div>
    <label>位置</label>
    <el-cascader
      :options="pcaTextArr"
      v-model="selectedOptions"
      @change="handleChangeAddress"
      :props="{
        expandTrigger: 'hover',
        multiple: true,
        checkStrictly: true,
        emitPath: false,
      }"
    >
    </el-cascader>
  </div>
</template>
<script>
import { pcaTextArr } from "element-china-area-data"; //安装中国城市地区级联菜单数组 npm install element-china-area-data

export default {
  data() {
    return {
      pcaTextArr, //地址数据
      selectedOptions: [],
    };
  },
  methods: {
    handleChangeAddress(d) {},
  },
};
</script>

import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText ,} from "element-china-area-data";

这里面的

provinceAndCityData, pcTextArr, regionData, codeToText ,

有不同的数据内容,可以慢慢发掘

相关推荐
阿图灵13 小时前
Agentic AI 架构入门(九):Agent 通信协议全景——ACP/A2A/AG-UI/MCP
人工智能·ui·架构·ai agent·智能体·mcp·agentic ai
AI分享猿18 小时前
UI设计Prompt系列(十二):设计系统入门——把视觉语言沉淀为可复用规范
ui·prompt
l1m0_18 小时前
告别反复修改Prompt:AI生成React应用并落地开发的实战复盘
前端·react.js·ui·ai·设计
大千UI工场19 小时前
时序数据库对数字孪生的作用
数据库·ui·时序数据库·前端开发·b端管理系统
UnicornIT1 天前
【HarmonyOS】时间管理类APP:做成“自适应“
ui·华为·harmonyos·鸿蒙
AI分享猿2 天前
UI设计Prompt系列(六):原型验证提速——用设计Prompt跳过反复改稿
ui·prompt
兰亭妙微UI设计公司2 天前
兰亭妙微UIUE设计公司:海量股票数据如何清晰呈现?百度金融从搜索页到官网的系统化 UI 升级复盘
ui·百度·金融
love530love3 天前
Photoshop 2026 AI 功能排障复盘:Camera Raw 卡死 / Neural Filters 灰 / 皮肤平滑下载失败 全定位
人工智能·ui·photoshop
农村小镇哥3 天前
怎么把HTM格式转化成WORD
ui·c#·word