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

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

相关推荐
胡斌附体8 小时前
elementui cascader 远程加载请求使用 选择单项等
前端·javascript·elementui·cascader·可独立选中单节点
孤蓬&听雨13 小时前
Axure基于中继器实现的组件库(导航菜单、动态表格)
ui·axure·动态表格·中继器·导航菜单
传奇开心果编程15 小时前
【传奇开心果系列】Flet框架平面级联菜单侧边栏和和登录用户圆形头像自定义组件模板
python·ui·前端框架
沅霖3 天前
Android Studio切换到经典UI,老UI
android·ui·android studio
伽蓝_游戏4 天前
UGUI源码剖析(3):布局的“原子”——RectTransform的核心数据模型与几何学
ui·unity·架构·c#·游戏引擎·游戏程序·几何学
初学者-Study4 天前
Android UI(一)登录注册
android·ui
梁萌5 天前
前端UI组件库
前端·ui
帅帅哥的兜兜5 天前
猪齿鱼 Choerodon UI使用
ui
步、步、为营6 天前
.NET8 正式发布, C#12 新变化
ui·c#·.net
伽蓝_游戏6 天前
Unity UI的未来之路:从UGUI到UI Toolkit的架构演进与特性剖析(7)
游戏·ui·unity·架构·c#·游戏引擎·.net