- 如何根据后台接口数据动态展示联级选择器,本文章以获取省市地区为例进行说明
- 通过点击省地区动态获取市地区
- 首先,看一下
element
联级选择器长啥样:
<el-cascader :options="options" v-model="value" clearable></el-cascader>
<script>
export default {
data() {
return {
value: '',
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}]
}]
}
}
}
</script>
可以清楚的看到,value
为选择后的动态结果,options
属性控制着联级菜单的内容,每一级都有value
和 lable
属性,控制着展示的内容,children
属性控制着是否含有子集菜单
- 了解到结构后我们就可以动态获取了:
- 根据
props
属性设置后台对应参数
<el-cascader v-model="adress" :options="optionsAdress" :props="props" clearable placeholder="请选择地区">
</el-cascader>
<script>
data () {
// 选择结果以数组方式展示
adress: [],
// 选择器结果数据长下面这样
optionsAdress: [{ code: '111', name: '北京', cities: [{ code: '112', name: '海淀区' }]}],
// props设置参数对应属性
props: {
value: 'code',
label: 'name',
children: 'cities'
},
}
</script>
- 在初始化获取省列表数据赋值给
optionsAdress
进行展示
data () {
optionsAdress: [],
// ...
},
created () {
this.getProvice()
},
methods: {
getProvice () {
this.axios.get('proviceUrl').then(data => {
this.optionsAdress = data.data
// 现在,数据长这样:[{ code: '111', name: '北京'},{ code: '222', name: '河北省' }]并能在联级菜单进行显示
}).catch(err => {
console.log(err.msg)
})
}
}
- 我们通过点击省获取对应省的市地区,所以就得动态的给
optionsAdress
的对应项加cities
子属性,看代码:
// 用active-item-change监听省地区的变化
<el-cascader v-model="adress" :options="optionsAdress" :props="props" clearable placeholder="请选择地区"
@active-item-change="handleItemChange">
</el-cascader>
<script>
data () {
adress: [],
optionsAdress: [],
props: {
value: 'code',
label: 'name',
children: 'cities'
},
}
created () {
this.getProvice()
},
methods: {
getProvice () {
this.axios.get('proviceUrl').then(data => {
this.optionsAdress = data.data
// 现在,数据长这样:[{ code: '111', name: '北京'},{ code: '222', name: '河北省' }]并能在联级菜单进行显示
}).catch(err => {
console.log(err.msg)
})
},
handleItemChange (val) {
// 根据省的code获取市的列表并添加到对应省的数据里
const that = this
that.optionsAdress.forEach(item => {
if (item.code === val[0]) {
that.axios.get('cityUrl' + '?proviceCode=' + val[0]).then(data => {
item.cities = data.data
// 现在,数据长这样:[{ code: '111', name: '北京'},
// { code: '222', name: '河北省', cities: [{ code: '223', name: '石家庄' }]}]
}).catch(data => {
console.log(err.msg)
})
}
})
},
}
</script>
以上即为获取省市的全部代码,adress
的值即为最后选取的省市信息,也可以通过change
事件监听值的变化,希望能帮到 大家