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~