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

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

相关推荐
李少兄3 小时前
文档排版与数据处理:阿拉伯数字与罗马数字的转换
ui·xhtml·wps
狗凯之家源码网3 小时前
网址导航系统源码评测:个性 UI 与轻量化架构实战
ui·架构·网址导航系统
传奇开心果编程4 小时前
【SwiftUI入门练中学】第17课 通知与后台任务
学习·ui·ios·swiftui·swift
wshzd16 小时前
LLM之Agent(107)|DeepSeek-Harness(十五)流式输出管道:从 StreamChunk 到 UI
人工智能·ui
我命由我123451 天前
Photoshop - Photoshop 快速共享作品
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
我命由我123451 天前
Photoshop - 将Photoshop图像置入其他应用程序
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
bloglin999992 天前
豆包接口返回UI元素原因
ui
传奇开心果编程2 天前
【SwiftUI入门练中学】第7课 动画与手势:让界面更灵动
学习·macos·ui·ios·swiftui·swift
传奇开心果编程2 天前
【用案例学Material 3 Expressive】第1课:从一封邮件开始,感受安卓设计新语言的表现力
android·学习·ui·kotlin·android jetpack
传奇开心果编程3 天前
【SwiftUI娓娓道来】第3课:让界面活起来——交互与动画指南
学习·macos·ui·ios·swiftui·swift