vue+element Cascader 级联选择器 > 实现省市区三级联动

vue+element Cascader 级联选择器 > 实现省市区三级联动

先看下实现效果吧(嘻嘻)


看完我们就开始啦

安装element-china-area-data[1](#安装element-china-area-data1)

javascript 复制代码
npm install element-china-area-data@5.0.2  -S

上代码

javascript 复制代码
<el-cascader
  size="large"
  :options="options"
  v-model="selectedOptions"
  @change="handleChange"
>
</el-cascader>
              
import { regionData, CodeToText } from "element-china-area-data";

handleChange(val) {
  var loc = "";
  for (let i = 0; i < this.selectedOptions.length; i++) {
    loc += CodeToText[this.selectedOptions[i]] + "-";
  }
  let arr = [loc.split("-")[0], loc.split("-")[1], loc.split("-")[2]]

  this.form.nativeplace = arr.join('')
}

完美(实现后别忘记动动小手点个赞哦~)


  1. 请安装指定版本的element-china-area-data(5.0.2),否则可能会导致报错:CodeToText为undefined(我就遇到了(嘘),要注意哦~) ↩︎
相关推荐
会豪19 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子20 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶20 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子20 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_20 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark20 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_233320 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin20 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_21 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit21 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言