weui两级联动，省市两级联动处理逻辑总结

问题：

用weui做省市级联动，只涉及两级联动，采用的weui官方的picker组件，开始就是联动不起来，各种纠结，网上也没有找到答案，卡了一天，现在总结下逻辑。

解答：

采用weui官方的级联picker，注意是级联picker，不是多列，也不是单列。

效果图：

处理逻辑：将后台请求的数据，拼接成weui官方给出的级联pick数据模型

级联pick数据模型:

// 级联picker
weui.picker([
{
    label: '飞机票',
    value: 0,
    children: [
        {
            label: '经济舱',
            value: 1
        },
        {
            label: '商务舱',
            value: 2
        }
    ]
},
{
    label: '火车票',
    value: 1,
    children: [
        {
            label: '卧铺',
            value: 1,
            disabled: true // 不可用
        },
        {
            label: '坐票',
            value: 2
        },
        {
            label: '站票',
            value: 3
        }
    ]
},
{
    label: '汽车票',
    value: 3,
    children: [
        {
            label: '快班',
            value: 1
        },
        {
            label: '普通',
            value: 2
        }
    ]
}
], {
   className: 'custom-classname',
   container: 'body',
   defaultValue: [1, 3],
   onChange: function (result) {
       console.log(result)
   },
   onConfirm: function (result) {
       console.log(result)
   },
   id: 'doubleLinePicker'
});

后台给出接口逻辑：

后台给出了2个接口，第一个是获取34个省列表的接口，一个简单的get请求，第二个接口是根据省份的provinceCode去请求该省的城市列表的接口。

纠结的是：我本来想在weui的picker组件里面有个onchange回调事件里面去请求城市列表的接口，但是有一个问题是当滑动省份列表的时候，虽然触发了onchange 回调，也去请求后端提供的城市接口的列表了，但是遗憾的试图上并没有更新，没更新的原因：滑动结束后的这一刻，才去触发这个事件。

下面贴出一个demo代码：(随便写的demo,没有做接口分层，全部写一个组件里面了，主要是注重逻辑的实现)

<template>
	<div @click="fn">省市区测试</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "weui",
		data(){
			return{
				pickerData:[]
			}
		},
		mounted:function(){
			this.getProvince();
		},
		methods:{
			fn: function () {
				console.log(this.pickerData,'pickdata');
				weui.picker(this.pickerData, {
					defaultValue: ['3', 'A'],
					onChange: function (result) {
						console.log(result);
					},
					onConfirm: function (result) {
						console.log(result);
					},
					id: 'multiPickerBtn'
				});

			},
			getProvince: function () {
				var self = this;
				axios.defaults.headers.common['token'] = '26fd746695584d79aada0e03561edbbc';
				var url = this.HOST+"/h5/pages/agent/province/list";
				this.$axios.get(url).then(respose => {
						var data = respose.data.data.provinces;
						//遍历数组
						data.forEach(function (item) {
							self.getCityList(item.provinceCode,item)
						})

					})
					.catch(error => {
						console.log(error)
					});

			},
			getCityList:function (provinceCode,provinceItem) {
				axios.defaults.headers.common['token'] = '26fd746695584d79aada0e03561edbbc';
				var url = this.HOST+"/h5/pages/agent/city/list";
				this.$axios.get(url,{
					params:{'provinceCode':provinceCode}
				}).then(respose => {
					var data = respose.data.data.cities;
					var children = [];
					data.forEach(function (cityItem) {
						children.push(
							{
								label: cityItem.cityName,
								value: cityItem.cityCode
							}
						);
					});
					this.pickerData.push({
						label: provinceItem.provinceName,
						value: provinceItem.provinceCode,
						children: children
					})
				})
					.catch(error => {
						console.log(error)
					});
			}
		}


	}
</script>

weui两级联动，省市两级联动处理逻辑总结

猜你喜欢