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

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

相关推荐
huaqianzkh1 天前
WinForm C#:循环修改控件UI闪烁卡顿?SuspendLayout / ResumeLayout 与 BeginUpdate 优化
开发语言·ui·c#
Oll Correct2 天前
Adobe illustrator 案例十三:adidas标志草图绘制
笔记·ui·adobe·illustrator
FungLeo2 天前
成为全栈·Vue 管理后台篇·Vue3 + Vite + Naive UI:后台工程基座怎么搭
前端·vue.js·ui·typescript·vite·前端工程化·biome
敲上瘾3 天前
Qt Widgets入门:项目模板解析与Hello World
开发语言·数据库·c++·qt·ui·qt6.3
Oll Correct4 天前
Adobe illustrator 案例十二:视频播放(Media & Video)图标绘制
笔记·ui·adobe·illustrator
行者-全栈开发5 天前
【鸿蒙心迹】国际化 i18n 与多语言资源管理实战(HarmonyOS 7.x)
ui·华为·重构·国际化·harmonyos·多语言
寂寞的船6 天前
【Unity知识速递】第5期 Unity 6.2 深度解析:AI Assistant 登场,World Space UI 与 Sentis 全面升级
人工智能·ui·unity
秋名山小白6 天前
Playwright UI 自动化测试实战教程
python·ui
wuyk5557 天前
PyQt6-第15讲-数据可视化QChart
python·ui·信息可视化·pyqt
Autumn_ing9 天前
Pixso AI 如何按团队设计规范生成 UI?以消息设置页说明选库与验收
人工智能·ui·设计规范·pixso