用Vue、element-ui、axios实现省市区三级联动
第一步使用element-ui的联动组件
第二步 配置选项
第三步使用懒加载调
第二种组态的封装模块
<template>
<div class="area-select-main">
<el-cascader
clearable
v-model="areaId"
:options="initOptions"
:key="isResouceShow"
:props="props"
@change="getAreaId"
ref="areaCascader"
:show-all-levels="showAllLevels"
:placeholder="placeholder"
>
</el-cascader>
</div>
</template>
<script>
export default {
name: 'areaSelect',
data () {
const self = this
return {
areaId: [],
lazyApiArray: [],
isResouceShow: 0,
placeholder: '请选择归属地',
oldLevel: null,
oldValue: null,
props: {
lazy: true,
checkStrictly: self.checkStrictly,
label: 'name',
value: 'id',
children: 'children',
lazyLoad (node, resolve) {
if (!node.path || node.children.length) {
resolve([])
return
}
// 避免多次进lazyLoad方法时重复调接口的问题
if (self.oldValue === node.value && self.oldLevel === node.level) {
resolve([])
return
}
self.oldValue = node.value
self.oldLevel = node.level
let apis = ['GetCityDic', 'GetDistrictDic', 'GetStreetDic', 'GetCommunityDic']
if (self.initValue.length > 0 && self.type === 2) { // 懒加载调用接口顺序不一定总从city开始,与新增框默认的归属地有关
apis = self.lazyApiArray
}
const idArr = node.path
let api = ''
const parentId = idArr[idArr.length - 1]
let leafMark = false
if (idArr.length === self.level - 1) {
leafMark = true
}
if