Business background

In my business requirements, there needs to be a component for linkage between provinces and cities, and the development of this component is based on the original effects of elementUi. There is no such component in the original ElementUi library, so you have to write one by hand, which looks like this: Demand analysis

1. Include provinces, cities under provinces, and districts under cities. There is no requirement for streets. 2. You need to configure whether the status of each drop-down list can be selected. This needs to be analyzed in more specific scenarios. For example, when guangdong province is selected on the first floor, some scenes in Guangzhou cannot be selected.

Base Component selection

El-select is still used as the basic template for secondary development of basic components. The basic VUE structure is as follows:

<template>
  <div class="selectProvinceWrapper" :style="{width:width+'px'}">
    <el-select
      v-model="province"
      :size="size"
      placeholder="Please select province"
      clearable
      @change="getCities"
      :disabled="provinceDisabled"
      filterable
    >
      <el-option
        v-for="item in provinceOptions"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="city"
      :size="size"
      placeholder="Please select a city"
      clearable
      @change="getArea"
      :disabled="cityDisabled"
      filterable
    >
      <el-option
        v-for="item in cityOptions"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="area"
      :size="size"
      placeholder="Please select region"
      clearable
      :disabled="areaDisable"
      @change="areaChange"
      filterable
    >
      <el-option
        v-for="item in areaOptions"
        :key="item.value"
        :value="item.value"
        :label="item.label"
        :disabled="item.disabled"
      >
      </el-option>
    </el-select>
  </div>
</template>
Copy the code

For each province, city, and region, we have a JSON data for maintenance. For the specific data address, refer to the data address

Determine external acceptance parameters and external exposure events

props: {
    width: { // The width of the outer container
      type: [String.Number].default: "100%"
    },
    size: { // Select size
      type: String.default: "small"
    },
    defaultProvince: { // The default province
      type: [String.Number].default: ""
    },
    defaultCity: { // Default city
      type: [String.Number].default: ""
    },
    defaultArea: { // The default locale
      type: [String.Number].default: ""
    },
    provinceDisabled: { // Whether the province can be edited
      type: Boolean.default: false
    },
    disableProvinceOptions: { // Whether the options project of the province can be edited
      type: Array.default: () = >[]},cityDisabled: { // Whether the city can be edited
      type: Boolean.default: false
    },
    disableCityOptions: {
      type: Array.default: () = >[]},areaDisable: { // Whether the locale can be edited
      type: Boolean.default: false
    },
    disableAreaOptions: { // Whether the locale can be edited
      type: Array.default: () = >[]}},Copy the code

Business coding

Since the parameters of our province, city and region are all special numbers, we tend to forget the corresponding number of a certain city in the process of business writing, so we may need to make logical judgment in Chinese.

// Check whether it is Chinese
    isChineseChar(str) {
      var reg = /[\u4E00-\u9FA5\uF900-\uFA2D]/;
      return reg.test(str);
    },
    // Get the default array of provinces and cities
    getDefaultValue(targetOptions = [], value = "") {
      let targetStr = "";
      if (targetOptions.length === 0 || value.length === 0) {
        return targetStr;
      }
      if (value.length > 0) {
        if (this.isChineseChar(value)) { // In the case of Chinese
          let targetObj = targetOptions.find(v= > v.label === value) || {};
          targetStr = targetObj.value;
        } else{ targetStr = value; }}return targetStr;
    },
Copy the code

In addition, every time the value of the drop-down box changes, we need to expose the current label and value for business use.

/ / get the key - value
    getMapKeyValue(options, code) {
      return {
        label: this.getOptionsLabel(options, code),
        value: code
      };
    },
Copy the code

Parameter Description:

parameter type
defaultProvince [String,number] The default province is empty
defaultCity [String,number] The default city is empty
defaultArea [String,number] The default field is empty
disableProvinceOptions [Array] The default province drop-down item cannot be edited
disableCityOptions [Array] Default city drop-down items cannot be edited
disableAreaOptions [Array] Default locale drop-down items are not editable
size [String] The default size of the drop-down box is small
provinceDisabled 【Boolean】 Whether the default province drop-down box can be edited
cityDisabled 【String】 Whether the default city drop-down box can be edited
areaDisable 【String】 Whether the default locale drop-down box can be edited

Events that

The event instructions
province Val ={value:””,label:””}
city City select callback val={value:””,label:””}
area Val ={value:””,label:””}

Method statement

methods instructions
getSelectData Gets the data for the current drop-down selection
setOptionsDisabled Set drop-down Items Optional 1:type:”city area province”. Parameter 2: Array:[] Code or Chinese for an unselectable item

Address complete source address in the component address