位置: IT常识 - 正文

vue 城市选择器(省市区)的使用 element-china-area-data(vue城市列表插件)

编辑:rootadmin
vue 城市选择器(省市区)的使用 element-china-area-data 一、Element UI 中国省市区级联数据

推荐整理分享vue 城市选择器(省市区)的使用 element-china-area-data(vue城市列表插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue dom选择器,vue城市选择器,vue-city,vue-city,vue城市列表插件,vue城市定位,vue城市选择器 首字母,vue城市选择器,内容如对您有帮助,希望把文章链接给更多的朋友!

本文参考:Element UI 中国省市区级联数据 本文参考:根据此文做的整理

1. 安装npm install element-china-area-data -S2. 使用import { regionData, CodeToText, TextToCode } from 'element-china-area-data'regionData是省市区三级联动数据(不带“全部”选项)CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市extToCode是个大对象,属性是汉字,属性值是区域码用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出1101053.CodeToText的使用vue 城市选择器(省市区)的使用 element-china-area-data(vue城市列表插件)

数据示例:codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]

getCodeToText(codeStr, codeArray) { if (null === codeStr && null === codeArray) { return null; } else if (null === codeArray) { codeArray = codeStr.split(","); } let area = ""; switch (codeArray.length) { case 1: area += CodeToText[codeArray[0]]; break; case 2: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]]; break; case 3: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]] + "/" + CodeToText[codeArray[2]]; break; default: break; } return area; }4. TextToCode 的使用

北京市/市辖区/东城区 转换成 110101

在获取详情信息的接口中,使用TextToCode 将字符串转换成编码赋给 selectedOptions

this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;

如果想选择任意一级,比如只选省市不选取的话,可以增加条件判断

if (this.addForm.area.split('/')[2]) { this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;} else { this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]].code;}5 整体代码:省市三级联动(不带“全部”选项)

如果想选择任意一级,可以使用element-ui的级联选择器中的选择任意一级选项的选择器,给el-cascader添加:props="{ checkStrictly: true }"属性

<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div></template><script> import { regionData, CodeToText, TextToCode } from 'element-china-area-data' export default { data () { return { options: regionData, selectedOptions: [] } }, methods: { // 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions projectInfo () { var that = this; getProjectInfo({ token: getToken(), id: that.id }).then(res => { this.addForm = { id: res.id, // 基础信息 p_name: res.p_name, //项目名 p_message: res.p_message, //项目信息 area: res.area, //地区 remark: res.remark, //备注 } this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code; }).catch(err => { Message.error(err) }) }, handleChange (value) { console.log(value) this.getCodeToText(null, value) }, getCodeToText (codeStr, codeArray) { if (null === codeStr && null === codeArray) { return null; } else if (null === codeArray) { codeArray = codeStr.split(","); } let area = ""; switch (codeArray.length) { case 1: area += CodeToText[codeArray[0]]; break; case 2: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]]; break; case 3: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]] + "/" + CodeToText[codeArray[2]]; break; default: break; } console.log(area) this.addForm.area = area return area; } } }</script>

最后效果: 点击编辑后:

本文链接地址:https://www.jiuchutong.com/zhishi/269363.html 转载请保留说明!

上一篇:Win10/Win11玩转 Windows 文件资源管理器(如何玩转win11)

下一篇:win10显示“explorer.exe应用程序错误”怎么办(WIN10显示缩略图)

  • 罗技m590怎么连接蓝牙(罗技M590怎么连接台式电脑)

    罗技m590怎么连接蓝牙(罗技M590怎么连接台式电脑)

  • 如何将iphone照片导入电脑(如何将iphone照片用数据线传到电脑上)

    如何将iphone照片导入电脑(如何将iphone照片用数据线传到电脑上)

  • 华为手机防误触功能在哪呢(华为手机防误触失灵怎么办)

    华为手机防误触功能在哪呢(华为手机防误触失灵怎么办)

  • 华为nova5可不可以无线充电(华为nova5可不可以无线反向充电)

    华为nova5可不可以无线充电(华为nova5可不可以无线反向充电)

  • 抖音转发的视频怎样删除(抖音转发的视频无法查看怎么回事)

    抖音转发的视频怎样删除(抖音转发的视频无法查看怎么回事)

  • 抖音改头像审核多久(抖音改头像审核需要多久)

    抖音改头像审核多久(抖音改头像审核需要多久)

  • 小米cc9怎么删除日程(小米cc9怎么删除应用程序)

    小米cc9怎么删除日程(小米cc9怎么删除应用程序)

  • 办手机卡可以不预存话费吗(办手机卡可以不带身份证吗)

    办手机卡可以不预存话费吗(办手机卡可以不带身份证吗)

  • 小米6插u盘没反应(小米6插u盘没反应怎么办)

    小米6插u盘没反应(小米6插u盘没反应怎么办)

  • 微信账号被莫名封了怎么办(微信账号被莫名封了怎么要回来)

    微信账号被莫名封了怎么办(微信账号被莫名封了怎么要回来)

  • 在powerpoint中幻灯片切换效果是指(在powerpoint中幻灯片通过大纲形)

    在powerpoint中幻灯片切换效果是指(在powerpoint中幻灯片通过大纲形)

  • se是苹果5还是苹果6(se是苹果5还是苹果8)

    se是苹果5还是苹果6(se是苹果5还是苹果8)

  • 魅族17开售时间(魅族17什么时候上市)

    魅族17开售时间(魅族17什么时候上市)

  • 别人的微博相册那一栏没了(别人微博相册显示没有内容怎么回事)

    别人的微博相册那一栏没了(别人微博相册显示没有内容怎么回事)

  • 笔记本电脑摔了一下没事吧(笔记本电脑摔了一下屏幕出现条纹)

    笔记本电脑摔了一下没事吧(笔记本电脑摔了一下屏幕出现条纹)

  • 笔记本充满电后是继续充还是拔掉(笔记本充满电后第二天就没电了)

    笔记本充满电后是继续充还是拔掉(笔记本充满电后第二天就没电了)

  • 怎么解除电话打不进来(怎么解除电话打不进来vivo)

    怎么解除电话打不进来(怎么解除电话打不进来vivo)

  • 打印机墨粉盒在哪(打印机墨粉装在哪里)

    打印机墨粉盒在哪(打印机墨粉装在哪里)

  • 苹果自带相机p图教程(苹果自带相机拍照速度快)

    苹果自带相机p图教程(苹果自带相机拍照速度快)

  • 苹果x为什么耗电那么快(苹果x很费电是什么原因)

    苹果x为什么耗电那么快(苹果x很费电是什么原因)

  • uscc号码是什么(usci号码是什么意思)

    uscc号码是什么(usci号码是什么意思)

  • 苹果电脑第一次充电要充多久(苹果电脑第一次充电要注意什么)

    苹果电脑第一次充电要充多久(苹果电脑第一次充电要注意什么)

  • 美团众包如何快速抢单(美团众包如何快速接顺路单)

    美团众包如何快速抢单(美团众包如何快速接顺路单)

  • 淘宝如何用微信支付(淘宝如何用微信零钱支付)

    淘宝如何用微信支付(淘宝如何用微信零钱支付)

  • 【ChatGPT】ChatGPT-5 强到什么地步?(chat p)

    【ChatGPT】ChatGPT-5 强到什么地步?(chat p)

  • 一般纳税人购进货物用于免征增值税项目
  • 超市的库存商品分类混乱怎么看出来的
  • 典当行借款合同需交印花税吗
  • 利润表管理费用怎么算
  • 介质申报和网络申报的区别
  • 净现值为零时的收益率
  • 制造费用结转后有没有余额
  • 包装物押金是含税价格吗
  • 结转当月材料采购成本的会计分录怎么做?
  • 固定资产融资租赁账务处理
  • 没有收入是否可以入党
  • 小规模纳税人每月15万免税
  • 固定资产抵扣税金算增值税吗怎么算
  • 建安企业需要交环保税吗
  • 白酒出口税收
  • 定期存款利息税是多少
  • 什么情况下只交城建税不交教育及地方税?
  • 在职员工 开公司
  • 企业法人不发工资合法吗
  • 经营用的固定资产
  • 建筑工程公司开票如何做收入
  • 月销售额小于10万的一般纳税人减免
  • 集体福利的增值税怎么算
  • 信用卡核销是什么意思
  • 怎样取得个人所得税
  • 社保银行扣款未扣怎么办
  • 出纳人员发现假章怎么办
  • 进项税额转出月底如何结转
  • 劳务派遣公司差额征税怎么申报
  • 兼职属于劳动关系还是雇佣
  • 银行贷款发放怎么做凭证
  • 购货款先到支付后付款
  • 汽车消费税有发票吗
  • 安装虚拟windows
  • 固定资产生产经营期间正常报废产生的净收益
  • 增值税专用发票的税率是多少啊
  • 增值税发票认证抵扣时间规定
  • 金税盘干嘛用
  • java单点登录token
  • bzip2命令压缩后无法保存原文件
  • 未核定月数是什么
  • 收取的水电费怎么入账
  • 记账和结账可以一起用吗
  • 商品流通企业的含义
  • 在业和存续的区别
  • 所得税季报中的营业收入包括营业外收入吗
  • 收到以前年度退款怎么做分录
  • 第三方代销什么意思
  • 预付款什么时候开发票
  • 制作费计入什么费用
  • 蓝字发票作废流程视频
  • 施工企业的具体工作有哪些
  • 收到党建工作经费的通知
  • 暂估入库产品销售结转成本
  • 长期股权投资出售时其他权益变动
  • 进口关税,增值税,消费税
  • 医院床单被套尺寸
  • 专业收账公司合法吗
  • sqlserver数据库维护
  • 方正笔记本
  • windows系统后台不显示QQ等软件(任务栏右侧不显示QQ图标)
  • centos哪个版本最好用2022
  • linux !!
  • (1)cocos2d-x-2.2.4搭建windows开发环境
  • nodejs示例
  • javascript提交数据
  • 点击android
  • 命令行输入以下哪个命令可以画出样条曲线
  • 批处理隐藏盘符
  • 基础的重要性
  • shell脚本-p
  • python 列表排序 中文
  • unity游戏换皮教程
  • 甘肃国家税务总局
  • 慈善组织可能会出现哪些问题
  • 开采砂石
  • 武汉税务局发票对奖
  • 我的电脑软件下载
  • 小型贸易企业公司有哪些
  • 广东省税务局发票查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设