于vue vant实现的地址组件,地址四级联动,标签选择器,数据为模拟数据,可改成真实接口获取,三级,四级联动均可
完整下载地址:https://download.csdn.net/dow...
【基于vue vant实现的地址组件】主要代码片段:
// 选择省
async selProvince(province, index, pIndex) {
this.tabList = [province.name,'请选择']
await this.getCity()
this.active = 1
this.cityIndex = null
},// 选择市
async selCity(city, index, cIndex) {
this.cityIndex = cIndex
let [province] = this.tabList
this.tabList = [province, city.name,'请选择']
await this.getArea()
this.active = 2
this.areaIndex = null
},// 选择县
async selArea(area, index, aIndex) {
let [province,city] = this.tabList
this.areaIndex = aIndex
this.streetIndex = null
this.tabList = [province,city,area.name,'请选择']
await this.getStreet()
this.active = 3
},// 选择街道
async selStreet(streets, index, sIndex) {
this.streetIndex = sIndex
console.log(streets,'streetsstreets')
this.tabList.splice(index, 1, streets.name)
let [province,city,area,street] = this.tabList
let info = {
province,
city,
area,
street,
}
this.$emit('address',info)
},
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- vue.js组件开发
- 前端开发|Vue2.x API 学习
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- vue.js|后端开发学习Vue(一)
- JS|VUE学习笔记[30-46]
- vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
- vue|vue3替代vuex的框架piniajs实例教程
- cmd配置npm仓库镜像报错