用Vue、element-ui、axios实现省市区三级联动

用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