jeecg-boot自定义省市区划控件

从前面的分析来看，再不改变前端框架的基础上，我们参照j-area-linkage写一个组件：JAreaTreeTag

<template>
  <a-cascader :options="options"
              @change="onChange"
              :loadData="loadSubList"
              :placeholder="placeholder"
              :changeOnSelect="changeOnSelect"
              :disabled="disabled"
              :value="selectedValue"
              @popupVisibleChange="popupVisibleChange" />
</template>
<script>
import { postAction, restAction } from '@/api/manage'
import Vue from 'vue'
import { PARAMS } from '@/store/mutation-types'
export default {
  name: 'JAreaTreeTag',
  props: {
    value: {
      type: String,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    top: {
      type: String,
      default: undefined,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    level: {
      type: Number,
      default: 5,
      required: false
    },
    canSelect: {
      type: Boolean,
      default: true,
      required: false
    },
  },
  data () {
    return {
      options: [
      ],
      defaultTop: this.top ? this.top : '100000',
      defaultCode: '100000',
      defaultValue: [],
      selectedValue: [],
      changeOnSelect: this.canSelect,
    }
  },
  created () {
    this.init();
  },
  watch: {
    value: function () {
      this.init()
    },
  },
  methods: {
    onChange (value) {
      this.selectedValue = value;
    },
    popupVisibleChange (dis) {
      if (dis == false) {
        this.$emit('change', this.selectedValue[this.selectedValue.length - 1]);
      }
    },
    init () {
      let self = this
      if(this.top){
        this.defaultTop = this.top
      }
      if (this.value) {
        restAction(`/sys/area/tree/${this.level}/${this.defaultTop}/${this.value}`).then(res => {
          if (res.success) {
            let retOptions = Object.assign([], res.result)
            self.options = retOptions.map(item => {
              let it = Object.assign({}, item);
              if(it.children === null){
                delete it.children
              }
              return it;
            })
            restAction(`/sys/area/detail/${this.defaultTop}/${this.value}`).then(resp => {
              this.selectedValue = resp.result
            })
          }
        })
      } else {
        this.selectedValue = [];
        restAction(`/sys/area/tree/${this.level}/${this.defaultTop}/${this.defaultTop}`, {}).then(resp => {
          if (resp.success) {
            let retOptions = Object.assign([], resp.result)
            self.options = retOptions.map(item => {
              let it = Object.assign({}, item);
              if(it.children === null){
                delete it.children
              }
              return it;
            })
          } else {
            console.error(resp.message)
          }
        });
      }
    },
    loadSubList (selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      postAction(`/sys/area/sublist/${this.level}/${targetOption.areaCode}`, {}).then(resp => {
        if (resp.success) {
          targetOption.loading = false;
          targetOption.children = resp.result;
          this.options = [...this.options];
        } else {
          console.error(resp.message)
        }
      }).finally(() => {
        targetOption.loading = false;
      })
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

 之后在页面进行调用：

1，导入;import JAreaTreeTag from '@/components/jjjg/JAreaTreeTag'

2，使用组件

    <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区划">
              <j-area-tree-tag v-model="queryParam.aab301"
                               :top="pidValue"
                               :level="4"
                               placeholder="请选择省市区">
              </j-area-tree-tag>
            </a-form-item>
          </a-col>

3,声明组件：

 components: {
      JAreaTreeTag
    },

4，数据部分声明pidvalue

pidValue: '100000',

 成品：