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

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

相关推荐
LHX sir18 小时前
低代码革命遇瓶颈?这个“套娃神技“才是破局关键!
前端·ui·前端框架·交互·团队开发·软件需求·极限编程
LHX sir20 小时前
巨头撤退,玩家内卷!2025,IoT平台的生死劫与重生路
开发语言·前端·物联网·低代码·ui·前端框架·交互
Trust yourself2431 天前
如何获取easy-ui的表格的分页大小
前端·javascript·ui·oracle
安卓开发者1 天前
鸿蒙Next图形绘制指南:从基础几何图形到复杂UI设计
ui·华为·harmonyos
xiaopengbc1 天前
Adobe Illustrator 2025最新破解教程下载安装教程,Illustrator2025最新版下载
ui·adobe·illustrator
程序边界1 天前
Unity开发保姆级教程:C#脚本+物理系统+UI交互,3大模块带你通关游戏开发
ui·unity·c#
魏波.1 天前
UI自动化测试之Selenium元素定位8大方式
selenium·测试工具·ui
程序员的世界你不懂1 天前
【Flask】测试平台开发,产品管理功能UI重构-第九篇
ui·重构·flask
共享ui设计和前端开发2 天前
UI前端大数据可视化实战策略:如何设计符合用户认知的数据可视化界面?
前端·ui·信息可视化
Joy-鬼魅3 天前
Qt 项目文件(.pro)中添加 UI 文件相关命令
开发语言·qt·ui