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

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

相关推荐
慧都小项2 小时前
UI设计工具Sketch v2025.3发布:全新界面,多个功能适配macOS Tahoe
macos·ui·sketch·用户界面
小小8程序员13 小时前
C# XAML中x:Type的用法详解
开发语言·ui·c#
Aevget13 小时前
界面控件DevExpress WinForms中文教程:Data Grid - 如何获取汇总值?
ui·.net·界面控件·winform·devexpress
reddingtons17 小时前
Illustrator 3D Mockup:零建模,矢量包装一键“上架”实拍
人工智能·ui·3d·aigc·illustrator·设计师·平面设计
言之。17 小时前
AI时代的UI发展
人工智能·ui
5G云网络21 小时前
ComfyUI资源库
ui
longze_71 天前
Uigenius:革新 UI/UX 设计的 AI 利器
人工智能·ui·ai·ux·prototype·uigenius
木易 士心1 天前
Element UI 多级菜单缩进的动态控制:从原理到工程化实践
前端·vue.js·ui
Larry_Yanan1 天前
Qt线程使用(一)直接继承QThread类
开发语言·c++·qt·ui
hellotutu1 天前
vue2+springboot通过 FormData 手动封装图片数据上传
java·vue.js·spring boot·后端·ui