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

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

相关推荐
xinyu_Jina3 小时前
Info Flow:大规模列表渲染中的UI虚拟化、数据懒-加载与前端性能工程
前端·ui
鼎道开发者联盟17 小时前
构建活的界面:AIGUI底板的动态布局
人工智能·ui·ai·aigc·gui
Lan.W18 小时前
element UI + vue2 + html实现堆叠条形图 - 横向分段器
前端·ui·html
尤老师FPGA1 天前
使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十二讲)
android·java·ui
阿蔹1 天前
UI测试自动化--Web--Python_Selenium-元素定位
前端·ui·自动化
IT古董1 天前
【前端】Headless UI 深度实战:构建可访问、可定制的现代前端组件
前端·ui
hpz12231 天前
对Element UI 组件的二次封装
javascript·vue.js·ui
jllllyuz1 天前
基于ASP.NET Core SignalR实现实时消息提醒与聊天功能
ui·asp.net·xhtml
梦想的旅途21 天前
RPA 脚本的“自愈”能力:应对企微 UI 频繁更新
ui·企业微信·rpa