行政辖区动态获取---自定义表单控件

ant-design，react相关的demo例子，vue的很少。做惯了伸手党，今天小贡献下。简单封装了个级联组件。需求是用vuex存储状态，动态获取每一级行政辖区的编码。引用官方文档的要求：

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

提供受控属性 value 或其它与 valuePropName-参数) 的值同名的属性。
提供 onChange 事件或 trigger-参数) 的值同名的事件。
不能是函数式组件。

需要注意的是必需绑定value，要不form的resetFields方法不起作用。以下是自定义控件代码：

<template>
  <a-cascader
    :value="value"
    :options="options"
    @change="onChange"
    :loadData="loadData"
    changeOnSelect
    :placeholder="title"
  />
</template>
<script>
/**
 *自定义需提供value和对应的change事件
 */
 // 获取各级行政区域编码，不要问我为什么字段有拼音码😂
import { getCitysBySfbh, getDistrictsByCsbh, getPolicesByXqbh } from '@/api/area' 

export default {
  name: 'AsyncCascader',
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: '省/市/区/派出所'
    }
  },
  data () {
    return {
      options: [
        {
          value: '33',
          label: '浙江',
          isLeaf: false
        }
      ]
    }
  },
  computed: {
    decorators () {
      return this.vDecorator
    }
  },
  methods: {
    onChange (value) {
      this.triggerChange(value)
    },
    triggerChange (changedValue) {
      // Should provide an event to pass value to Form.
      // this.$emit('change', Object.assign({}, this.$data, changedValue))
      this.$emit('change', changedValue)
    },
    async loadData (selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true
      let res
      // 0: 选择第一列 1: 选择第二列 2: 选择第三列
      if (selectedOptions.length - 1 === 0) {
        res = await getCitysBySfbh()
      } else if (selectedOptions.length - 1 === 1) {
        res = await getDistrictsByCsbh()
      } else if (selectedOptions.length - 1 === 2) {
        res = await getPolicesByXqbh()
      }
      targetOption.loading = false
      targetOption.children = [...res.data]
      this.options = [...this.options]
    }
  }
}
</script>

在表单组件中引用

 <a-form-item label="所在区域">
         <async-cascader
              v-decorator="[
                'houseInspectionParam.szqy',
                {initialValue: []}
              ]"
              title="省/市/区/街道"></async-cascader>
</a-form-item>