使用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 ,

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

相关推荐
李二。2 分钟前
ArkTS原生 | 知识问答引擎 —— 鸿蒙Next声明式UI实战
ui·华为·harmonyos
陈葛杰2 小时前
PS2026安装教程
ui·photoshop
Rain5096 小时前
mini-cc 终端 UI:用 React 写 CLI 是什么体验
前端·人工智能·react.js·ui·架构·前端框架·ai编程
LiuJun2Son10 小时前
Claude Code + Skill 做 UI 的实战工作流
人工智能·ui
李二。11 小时前
AI翻译通(鸿蒙原生)—— 鸿蒙Next声明式UI翻译工具实战
人工智能·ui·harmonyos
ZC跨境爬虫11 小时前
跟着 MDN 学JavaScript day_4:如何存储你需要的信息——变量
开发语言·前端·javascript·ui·ecmascript
星栈独行11 小时前
10 分钟跑起第一个 Makepad 应用:先把窗口开起来
前端·程序人生·ui·rust·开源·github
辣香牛肉面1 天前
Photoshop CC 2025新手入门教程
ui·photoshop
tang&1 天前
【测试】Web页面UI自动化测试完全指南:8步通用测试框架
ui·测试
星栈独行1 天前
Makepad、egui、Dioxus、Tauri:Rust GUI 到底怎么选
开发语言·后端·程序人生·ui·rust