Vant Cascader级联选择 实现省市区三级

前面有一篇文章是介绍Vue + MintUI实现的省市区三级联动，今天介绍使用Vant框架中的Cascader来实现省市区三级联动。建议先搂一遍，官网介绍~~

 

有赞官网Cascader组件介绍：Vant 2 - Mobile UI Components built on Vue

本次实现的省市区三级联动，数据是通过后端接口获取，对应数据格式分享如下

省：

result: [
    {name: "山西省", code: "140000", childResources: null}
    {name: "内蒙古自治区", code: "150000", childResources: null}
    {name: "北京市", code: "110000", childResources: null}
    {name: "天津市", code: "120000", childResources: null}
    {name: "河北省", code: "130000", childResources: null}
]

市：

result:[
    {name: "晋城市", code: "140500", childResources: null}
    {name: "朔州市", code: "140600", childResources: null}
    {name: "晋中市", code: "140700", childResources: null}
    {name: "运城市", code: "140800", childResources: null}
    {name: "忻州市", code: "140900", childResources: null}
    {name: "临汾市", code: "141000", childResources: null}
    {name: "吕梁市", code: "141100", childResources: null}
    {name: "太原市", code: "140100", childResources: null}
    {name: "大同市", code: "140200", childResources: null}
    {name: "阳泉市", code: "140300", childResources: null}
]

 区、县：

result:[
    {name: "城区", code: "140502", childResources: null}
    {name: "沁水县", code: "140521", childResources: null}
    {name: "阳城县", code: "140522", childResources: null}
    {name: "陵川县", code: "140524", childResources: null}
    {name: "泽州县", code: "140525", childResources: null}
    {name: "高平市", code: "140581", childResources: null}
]

1、在index.js中引入Vant，并注册声明

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

2、页面使用（template）

<van-field v-model="accidentArea.value" label="地区" readonly placeholder="省市区三级选择"  @click="showAreaPop()">
        			<div slot="extra" style="width: 18px; height: 18px; padding-top: 3px;"><img width="18px" :src="icons.location" /></div>
        		</van-field>



<!--出险地区-->
<van-popup v-model="accidentArea.visible" round position="bottom" >
	<van-cascader
		class="cascader-options"
		v-model="accidentArea.cascaderValue"
		title="请选择出险地区"
		:options="accidentArea.options"
		@close="hideAreaPop"
		@change="onChangeAcidentArea"
		@finish="onFinishaAcidentArea"
		:field-names="{ text: 'name', value: 'code', children: 'childResources' }"
	/>
</van-popup>

3、对应JS方法

export default {
	data() {
		return {
			accidentArea : {
				value : '',			//显示的值
				cascaderValue : '',	//显示的值
				visible : false,	//是否显示
				options: []
			},
        }
    }
}


//显示出险地区
showAreaPop(){
	this.accidentArea.visible = true;
	if(this.accidentArea.options.length == 0){
		//省
		queryProvince({level:'',parentCode:""}).then(res =>{
			if(res.code == '0'){
				res.result.forEach(item => item.childResources = [])
				this.accidentArea.options = res.result;
			}
		})
	}
},

//关闭弹层
closeAreaPop(){
	this.accidentArea.visible = false;
},

// 选择完成，触发 finish事件
onFinishaAcidentArea({ selectedOptions }) {
	this.accidentArea.visible = false;
	this.accidentArea.value = selectedOptions.map((option) => option.name).join('/');
	this.params.accidentArea = selectedOptions.map((option) => option.code).join('_');
},

//选中项变化时触发 	出险地区
onChangeAcidentArea({ value, selectedOptions, tabIndex }){
	let level = tabIndex === 0 ? '01' : '02';
	queryAreas({level:level,parentCode:value}).then(res =>{
		if(res.code == '0'){
			//市
			if(tabIndex === 0){
				res.result.forEach(item => item.childResources = [])
				let index = this.accidentArea.options.findIndex(item =>item.code == value);
				this.accidentArea.options[index].childResources = res.result
			}else if(tabIndex === 1){
				let firstIndex = this.accidentArea.options.findIndex(item =>item.code == selectedOptions[0].code);		//省级 index
				let cities =  this.accidentArea.options[firstIndex].childResources	//所有城市
				let index = cities.findIndex(item =>item.code == value);	//市级 index
				cities[index].childResources = res.result
			}
		}
	})
}

逻辑感觉没啥可说得，field-names这个属性需要注意下，官网对于这个字段的解释通过 field-names 属性可以自定义 options 里的字段名称

意思就是如果后端返回的字段不符合你的预期字段，你可以通过这个属性重新定义下你需要展示的字段。

组件原先的名称是text，后台返回的字段是其他的。那就可以像官网一样，做一个映射的关系。将接口返回字段映射到text。

本次分享完毕~