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

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

相关推荐
Sun Peng15 小时前
【uniapp】uniapp+uview-ui+mixins实现搜索+上拉加载+加载动画功能:
ui·uni-app
我的xiaodoujiao19 小时前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
耿直小伙1 天前
UI界面点击按钮一直转圈假死
c++·ui
龙茶清欢1 天前
最新版 springdoc-openapi-starter-webmvc-ui 常用注解详解 + 实战示例
java·spring boot·ui·spring cloud
软件黑马王子1 天前
2025Unity超详细《坦克大战3D》项目实战案例(上篇)——UI搭建并使用和数据持久化(附资源和源代码)
游戏·ui·unity·c#
安卓开发者2 天前
鸿蒙NEXT UI Design Kit:打造高端精致界面的新利器
ui·华为·harmonyos
windyjl2 天前
UE5框选提示UI与目标对齐
ui·ue5
X01动力装甲2 天前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
Larry_Yanan2 天前
QML学习笔记(四)QML新手入门其二:通过MouseArea让Rectangle实现鼠标三态
笔记·qt·ui
啊森要自信3 天前
【 GUI自动化测试】GUI自动化测试(一) 环境安装与测试
开发语言·python·ui·单元测试·pytest