封装好的省市地区联动控件附下载

本文将为大家介绍如何使用封装好的省市区联动控件及其下载方式。

1. 下载

该控件源码可以在GitHub上找到，可以通过以下链接进行下载：

https://github.com/cipchk/v-orgpicker

2. 安装

下载完成后，解压缩得到v-orgpicker文件夹。将该文件夹拷贝到你的项目的所在目录中，然后在你的项目中通过import导入v-orgpicker组件，就可以在你的项目中使用该控件了。

import OrgPicker from 'v-orgpicker'
import 'v-orgpicker/dist/v-orgpicker.css'

Vue.use(OrgPicker)

3. 具体应用

接下来，我们将通过两个示例来演示控件的使用方法。

示例1（选项显示）

<template>
  <div>
    <org-picker show-type="text" v-model="value"></org-picker>
    <p>{{value}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: {
          province: '',
          city: '',
          district: ''
        }
      }
    }
  }
</script>

在上述示例中，我们通过绑定v-model来控制组件的值，并将show-type属性的值设置为text，这样组件将会以文本的形式来显示选项。

示例2（级联的省市区选择）

<template>
  <div>
    <org-picker v-model="value"
      :show-type="['text', 'text', 'text']"
      :disabled="disabled"
      :default-value="['110000', '110100', '110101']"
      :format="format"
      :fetch="fetchData">
    </org-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: {
          province: '',
          city: '',
          district: ''
        },
        disabled: false
      }
    },
    methods: {
      format(data) {
        return {
          value: data.code,
          label: data.name
        }
      },
      fetchData(parentValue, callback) {
        if (!parentValue) {
          // 请求省列表数据
          callback([
            { name: '北京市', code: '110000' }
          ])
        } else if (parentValue === '110000') {
          // 请求北京市的城区数据
          callback([
            { name: '市辖区', code: '110100' },
            { name: '县', code: '110200' }
          ])
        } else if (parentValue === '110100') {
          // 请求市辖区的行政区划数据
          callback([
            { name: '东城区', code: '110101' },
            { name: '西城区', code: '110102' },
            { name: '朝阳区', code: '110105' }
          ])
        } else {
          callback([])
        }
      }
    }
  }
</script>

在上述示例中，我们通过设置show-type属性为一个包含三个元素的数组，将组件的选择框由文本改为了下拉选框，同时，我们还可以通过设置default-value属性将组件的默认值设置为相应的省、市和区县编码，通过format方法对级联数据进行格式化，然后在fetchData方法中进行数据的请求处理。

好了，以上就是控件的具体使用方法及应用示例。希望能够对您有所帮助。