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

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

相关推荐
深蓝海拓4 小时前
基于QtPy (PySide6) 的PLC-HMI工程项目(十一)框架的进一步完善:UI的自动周期更新以及下行数据的生成和处理
网络·笔记·python·学习·ui·plc
qq_452396234 小时前
第二篇:《主流UI自动化工具横向对比:Selenium、Cypress、Playwright、Puppeteer》
selenium·ui·自动化
hzxpaipai5 小时前
[UI/UX 实战] 长页面交互优化:如何通过常驻侧边导航解决用户“浏览迷失”?
ui·ux
QC·Rex21 小时前
Spring AI MCP Apps 实战:打造聊天与富 UI 融合的智能化应用
人工智能·spring·ui·spring ai·mcp
ai_coder_ai1 天前
自动化脚本ui编程之帧布局(frame)
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
天天进步20151 天前
不止于 UI:OpenWork 的核心哲学与“引擎+外壳”架构全景图
人工智能·ui·架构
星辰即远方1 天前
UI学习3
学习·ui
比老马还六1 天前
element-ui,使用el-table时,type=“expand“和fixed一起使用坑
开发语言·javascript·ui
星河耀银海1 天前
Unity基础:UI组件详解:Button按钮的点击事件绑定
ui·unity·lucene
UnicornDev1 天前
【HarmonyOS 6】练习记录页面 UI 设计
ui·华为·harmonyos·arkts·鸿蒙