vue+elementui省区市三级联动+详细地址信息输入_element地址三级联动资源-CSDN下载

版权申诉

37 浏览量 2021-01-07 13:47:03 上传评论 2 收藏 186KB PDF 举报

资源详情

资源评论

资源推荐

vue+elementui 省区市三级联动省区市三级联动+详细地址信息输入详细地址信息输入

需求需求

省市区地址由前半部分的级联选择，后面的具体信息利用input框输入。封装成组件，已有的地址信息由父组件传入，此组件能显示已有的地

址信息，且能修改地址的功能。

一、省市区三级联动一、省市区三级联动

1、安装依赖、安装依赖

npm install element-china-area-data -S

2、在组件内引入、在组件内引入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

其中：

provinceAndCityData是省市二级联动数据（不带“全部”选项）

provinceAndCityDataPlus是省市二级联动数据（带“全部”选项）

regionData是省市区三级联动数据（不带“全部”选项）

regionDataPlus是省市区三级联动数据（带“全部”选项）

“全部”选项绑定的value是空字符串””

CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市

TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖

区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105。

3、代码示例、代码示例

import { regionData, CodeToText } from 'element-china-area-data'

export default {

name: "cascader",

data() {

return {

options: regionData,

selectedOptions: [] }

},

methods: {

handleChange(val) {

// 将区域码转换成汉字

console.log(CodeToText[val[0]])

console.log(CodeToText[val[1]])

console.log(CodeToText[val[2]])

}

}

}

问题问题

高度太高，需要控制其高度。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

内容反馈

版权申诉

weixin_38538950

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip