Vant Cascader cascading selection to achieve three levels of provinces and cities

The previous article introduced the three-level linkage of provinces and cities realized by Vue + MintUI . Today, we introduce the use of Cascader in the Vant framework to realize the three-level linkage of provinces and cities . It is recommended to hug it first, the official website introduces~~

 

Youzan official website Cascader component introduction : Vant 2 - Mobile UI Components built on Vue

The three-level linkage of provinces and municipalities realized this time, the data is obtained through the back-end interface, and the corresponding data format is shared as follows

Province:

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}
]

city:

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}
]

 Districts and counties:

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. Introduce Vant in index.js and register the statement

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

2. Page usage (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. Corresponding JS method

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
			}
		}
	})
}

There is nothing logical to say. The attribute field-names needs to be paid attention to. The official website explains this field through  field-names the attribute to customize  options the field name in it.

It means that if the fields returned by the backend do not meet your expected fields, you can redefine the fields you need to display through this property.

The original name of the component is text, and the fields returned by the background are other. Then you can make a mapping relationship like the official website. Map interface return fields to text.

This sharing is over~