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

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

相关推荐
雨季6669 小时前
基于设备特征的响应式 UI 构建:Flutter for OpenHarmony 中的智能布局实践
javascript·flutter·ui
Mr Xu_15 小时前
深入分析Element UI Tree组件在本地与生产环境样式差异问题
css·ui·elementui
雨季66615 小时前
构建 OpenHarmony 简易单位换算器:用基础运算实现可靠转换
flutter·ui·自动化·dart
测试199817 小时前
如何使用Appium实现移动端UI自动化测试?
自动化测试·软件测试·python·测试工具·ui·appium·测试用例
雨季66619 小时前
构建 OpenHarmony 简易 BMI 健康指数计算器:用基础数学实现健康自评
javascript·flutter·ui·自动化·dart
●VON19 小时前
Flutter for OpenHarmony:基于选择模式状态机与原子批量更新的 TodoList 批量操作子系统实现
学习·flutter·ui·openharmony·von
晚霞的不甘19 小时前
Flutter for OpenHarmony:从零到一:构建购物APP的骨架与精美UI
前端·javascript·flutter·ui·前端框架·鸿蒙
Yawesh_best21 小时前
摆脱命令行!Docker Compose UI + 内网穿透,随时随地管理容器
ui·docker·容器
CappuccinoRose21 小时前
React框架学习文档(三)
前端·react.js·ui·数组·标签·属性·jsx
幸福的达哥1 天前
PyQt5多线程UI更新方法
python·qt·ui