01 Source of Demand

A few days ago, there was a demand for multiple cities in the project. After decomposition, the following indicators need to be realized:

  1. Show all the provinces of China at once
  2. A province’s subordinate city will also trigger the display when the mouse hover over the province
  3. Local full selection and reverse selection are supported
  4. If all subordinate cities of the province are not selected, the number of selected cities is displayed
  5. Two output modes are supported: provincial subscript and provincial name

02 effect

Don’t say more about the effect first.

Let’s do some more static pictures.

03 Project Address

Git repertory:https://github.com/chokingwin/area-multi-selection, welcome to star

04 How to Use it

It should be noted that this is a wrapper based on the checkBox and Poptip components provided by iView.

1. Import the area component folder

Area-source. json, area-producer.js, and area.vue. Copy this folder directly to your vue project.

2. Import components and register them

import areaMultiSelection from './components/area/area';
Copy the code
components: {
    'area-multi-selection': areaMultiSelection
}
Copy the code

3. Use directly

<area-multi-selection @areaData="receiveAreaData" :AreaData="areaIndexArr"></area-multi-selection>
Copy the code

Accordingly, prepare aData areaIndexArr for the incoming component and a Method receiveAreaData for the output of the component

  data() {
    return {
      isShowAreaModel: false.areaIndexArr: [].areaNameArr: []}; },methods: {
    receiveAreaData(data) {
      this.areaIndexArr = data.index;
      this.areaNameArr = data.name; }}Copy the code

05 finally

The whole project has been on making: https://github.com/chokingwin/area-multi-selection, welcome to star again. You can clone it, run it. There is also a simple page in the project that visually shows the output of multiple city selections.

There are still many shortcomings, here are a few:

  • Multiple loop traversal, code can be optimized
  • The source data format of provinces and cities is specific, and the subsequent input of multiple data source formats will be adapted
  • If possible, we will put it in the NPM package later

That’s it. Have a great weekend