/element-china-area-selector

Element **省市区级联

Primary LanguageVue

element-china-area-selector

npm npm

Element **省市区级联

示例

安装

npm install --save element-china-area-selector

使用

在 main.js 文件中引入插件并注册

import ElementChinaAreaSelector from 'element-china-area-selector'
Vue.use(ElementChinaAreaSelector)

可选参数

参数名 默认值 类型 是否必填 说明
province-code null Number 是 省份编码
city-code null Number 否 城市编码
region-code null Number 否 区县编码
show-city true Boolean 否 是否显示城市下拉
show-region false Boolean 否 是否显示区县下拉
area-label '' String 否 el-form-item 文字标签
area-prop '' String 否 el-form-item prop 属性
disabled false Boolean 否 是否全部不可选
provinceDisabled false Boolean 否 是否省份不可选
cityDisabled false Boolean 否 是否城市不可选
regionDisabled false Boolean 否 是否区县不可选
options null Object 否 更多配置

事件

事件名 说明
areaSelectChange 返回选中项城市信息

返回

属性名 说明
provinceCode 省份编码
provinceName 省份名
cityCode 市编码
cityName 市名
regionCode 区县编码
regionName 区县名

案例

注意省市区初始化无值时应传入 null

<template>
  <div style="margin: 20px auto; width: 50%;">
    <h3>使用示例</h3>
    <el-form size="small">
      <ElementChinaAreaSelector
        area-label="所属省份："
        :province-code="formData.provinceCode"
        :show-city="false"
        @areaSelectChange="changeArea"
      />
      <ElementChinaAreaSelector
        area-label="所属省市："
        :province-code="formData.provinceCode"
        :city-code="formData.cityCode"
        @areaSelectChange="changeArea"
      />
      <ElementChinaAreaSelector
        area-label="所属省市区"
        :show-region="true"
        :province-code="formData.provinceCode"
        :city-code="formData.cityCode"
        :region-code="formData.regionCode"
        @areaSelectChange="changeArea"
      />
      <ElementChinaAreaSelector
        area-label="所属省市区"
        :show-region="true"
        :province-disabled="true"
        :city-disabled="true"
        :province-code="formData.provinceCode"
        :city-code="formData.cityCode"
        :region-code="formData.regionCode"
        @areaSelectChange="changeArea"
      />
    </el-form>
    <h3>表单验证</h3>
    <el-form
      ref="form1"
      size="small"
      :model="form1Data"
      :inline="true"
      :rules="formDataRules1"
    >
      <ElementChinaAreaSelector
        area-label="所属省市："
        area-prop="cityCode"
        :options="options"
        :province-code="form1Data.provinceCode"
        :city-code="form1Data.cityCode2"
        @areaSelectChange="changeArea1"
      />
      <el-form-item>
        <el-button type="primary" @click="subForm1">提交</el-button>
        <el-button @click="clearForm1">清空</el-button>
      </el-form-item>
    </el-form>
    <el-form
      ref="form2"
      size="small"
      :model="form2Data"
      :inline="true"
      :rules="formDataRules2"
    >
      <ElementChinaAreaSelector
        area-label="所属省市区"
        area-prop="regionCode"
        :options="options"
        :show-region="true"
        :province-code="form2Data.provinceCode"
        :city-code="form2Data.cityCode"
        :region-code="form2Data.regionCode2"
        @areaSelectChange="changeArea2"
      />
      <el-form-item>
        <el-button type="primary" @click="subForm2">提交</el-button>
      </el-form-item>
    </el-form>
    <h3>插槽拓展</h3>
    <el-form size="small">
      <ElementChinaAreaSelector
        area-label="所在地址："
        :province-code="formData.provinceCode"
        :city-code="formData.cityCode"
        @areaSelectChange="changeArea"
      >
        <template slot="more">
          <div style="display: inline-block;">
            <el-form-item prop="address">
              <el-input placeholder="请输入详细地址" />
            </el-form-item>
          </div>
        </template>
      </ElementChinaAreaSelector>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        options: {
          size: 'mini',
        },
        formData: {
          provinceCode: 110000,
          cityCode: 110100,
          regionCode: 110105,
        },
        // 验证省市
        form1Data: {
          provinceCode: 110000,
          cityCode: null,
        },
        formDataRules1: {
          cityCode: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'change',
            },
          ],
        },
        // 验证省市区
        form2Data: {
          provinceCode: 110000,
          cityCode: 110100,
          regionCode: null,
        },
        formDataRules2: {
          regionCode: [
            {
              required: true,
              message: '请选择区县',
              trigger: 'change',
            },
          ],
        },
      }
    },
    methods: {
      changeArea(areaObj) {
        console.warn('-> ChangeArea', areaObj)
      },
      changeArea1(areaObj) {
        this.form1Data.provinceCode = areaObj.provinceCode
        this.form1Data.cityCode = areaObj.cityCode
        this.form1Data.regionCode = areaObj.regionCode
      },
      changeArea2(areaObj) {
        this.form2Data.provinceCode = areaObj.provinceCode
        this.form2Data.cityCode = areaObj.cityCode
        this.form2Data.regionCode = areaObj.regionCode
      },
      subForm1() {
        this.$refs.form1.validate((res) => {
          if (res) {
            console.log('验证通过')
          }
        })
      },
      clearForm1() {
        this.form1Data.cityCode = null
        this.$refs.form1.clearValidate()
      },
      subForm2() {
        this.$refs.form2.validate((res) => {
          if (res) {
            console.log('验证通过')
          }
        })
      },
    },
  }
</script>