cube-ui 地址选择器

由于省市区是后台传的，所以不能直接赋值

<template><div><cube-button @click="showAsyncPicker">Async Load Data</cube-button></div>
</template><script>
import baseUrl from '../assets/api/baseUrl'
import qs from 'qs'
export default {data(){return{asyncData:[],provinceList:[],asyncSelectedIndex:[0, 0, 0]}},mounted () {this.$axios.post(baseUrl+'/getDict.do?name=Province').then(res=>{let data=res.data.resultif(data.code!=0){this.$router.push({path:'/'})}this.asyncData=JSON.parse(data.res.replace(/Code/g,'value').replace(/Name/g,'text'));this.getCity(this.asyncData[0].value).then(res=>{this.asyncData[0].children=resthis.getCountry(this.asyncData[0].children[0].value).then(rese=>{this.asyncData[0].children[0].children=resethis.asyncPicker = this.$createCascadePicker({title: '请选择地址',async: true,data: this.asyncData,selectedIndex: this.asyncSelectedIndex.slice(),onSelect: this.selectHandle,onCancel: this.cancelHandle,onChange: this.asyncChangeHandle})})})})},methods: {showAsyncPicker() {this.asyncPicker.show()},asyncChangeHandle(i, newIndex) {if (newIndex !== this.asyncSelectedIndex[i]) {this.asyncSelectedIndex[i] = newIndex// If the first two column is changed, request the data for rest columns.if (i < 2) {// Mock async load.setTimeout(() => {if (i === 0) {const current = this.asyncData[newIndex]this.getCity(current.value).then(res=>{current.children = current.children || resthis.getCountry(current.children[0].value).then(rese=>{current.children[0].children = current.children[0].children || resethis.asyncSelectedIndex[1] = 0this.asyncSelectedIndex[2] = 0this.asyncPicker.setData(this.asyncData, this.asyncSelectedIndex)})})}if (i === 1) {const current = this.asyncData[this.asyncSelectedIndex[0]].children[newIndex]this.getCountry(current.value).then(rese=>{current.children = current.children || resethis.asyncSelectedIndex[2] = 0this.asyncPicker.setData(this.asyncData, this.asyncSelectedIndex)})}      }, 100)}}},selectHandle(selectedVal, selectedIndex, selectedText) {this.$createDialog({type: 'warn',content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,icon: 'cubeic-alert'}).show()},cancelHandle() {this.$createToast({type: 'correct',txt: 'Picker canceled',time: 1000}).show()},//根据省获得市async getCity(province){let arr=[]await  this.$axios.post(baseUrl+'/city2.do',qs.stringify({provinceCode:province})).then(res=>{let data=res.data.resultarr=JSON.parse(data.res.replace(/Code/g,'value').replace(/Name/g,'text'))})return arr},
//根绝市获得区async getCountry(city){let arr=[]await  this.$axios.post(baseUrl+'/county2.do',qs.stringify({cityCode:city})).then(res=>{let data=res.data.resultarr=JSON.parse(data.res.replace(/CountyCode/g,'value').replace(/CountyName/g,'text'))})return arr}}
}
</script><style></style>

cube-ui 地址选择器相关推荐

MUI 地址选择器 - picker使用
MUI 地址选择器 - picker使用很多安卓原生的地址选择器中,选择器基本是实时滚动的. 就像腾讯QQ应用的地址选择器一样! 效果截图如下: 代码如下: <!DOCTYPE html> ...
一次地址选择器的实践
前言我们知道,地址选择器是一个通用组件,网上的开源项目也有很多.那么为什么还会有这篇文章呢?因为我在调研过程中发现,虽然都是地址选择器,但是实现的方式却各不相同.以下是调研地址选择器的一些总结和思考 ...
android开发地址选择器,Android地址选择器类似于京东的地址选择
简介最近东西写的挺多的,这不又要弄一个类似于京东的地址选择器,然后刚开始我是不愿意自己去写的,这东西真的是浪费时间.但是下班后回到家找了一圈没找到一个合适的,好吧,那我就自己来封装一个呗,反正生命在 ...
使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep 22 2017 00:00:00 GM ...
支付宝小程序组件库开发之省市区三级地址选择器组件
支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是 ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
Android地址选择器的实现
最近在做地址管理的功能,新建地址的时候,需要根据后台提供的省市区的数据,让用户进行地址的选择,最近项目比较赶,本来想网上找一个的,可是找了很久都没找到我想要的效果,所以就根据后台提供的数据,弄了一个. ...
Android进阶之路 - 仿京东地址选择器使用指南
因为现在项目的地址选择器比较low,自己又比较懒,所以就找到了仿京东的地址选择器,观赏几篇博文之后,发现总是被半路卡死,很难一路走到底,所以在github找到了项目地址,但是作者的功能简介又介绍的不是 ...
这是用原声js编写的地址选择器,使用select编写的三联选择器
这是用原声js编写的地址选择器,使用select编写的三联选择器 <!DOCTYPE html> <html lang="en"> <head> ...

cube-ui 地址选择器

cube-ui 地址选择器相关推荐

最新文章

热门文章