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

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

相关推荐
覆东流21 小时前
Photoshop合成的核心知识
ui·photoshop
清风wxy1 天前
Duilib_CEF桌面软件实战之Duilib编译与第一个界面程序
c++·笔记·ui·mfc
ftpeak1 天前
《Rust+Slint:跨平台GUI应用》第八章 窗体
开发语言·ui·rust·slint
知识分享小能手1 天前
jQuery 入门学习教程,从入门到精通, jQuery在HTML5中的应用(16)
前端·javascript·学习·ui·jquery·html5·1024程序员节
私人珍藏库2 天前
Adobe Photoshop CS6 Lite:PS极端简化版,压缩后大小仅50M,Photoshop精简版
ui·adobe·photoshop
再希3 天前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
覆东流3 天前
Photoshop通道的应用
ui·photoshop
我命由我123453 天前
Photoshop - Photoshop 工具栏(24)磁性套索工具
学习·ui·职场和发展·求职招聘·职场发展·课程设计·美工
Larry_Yanan3 天前
QML学习笔记(五十二)QML与C++交互:数据转换——时间和日期
开发语言·c++·笔记·qt·学习·ui·交互