省市区联动组件

发表于 | 分类于 | | 阅读次数:
字数统计: 429 字 | 阅读时长 ≈ 2 分钟

系统中经常用到的省市区联动

mixins

@/utils/views/mixins/region.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
export default {
  data() {
    return {
      isDisableCityFlag: true,
      isDisableAreaFlag: true,
      provinceSelectData: [],
      citySelectData: [],
      areaSelectData: []
    };
  },
  methods: {
    //加载 省数据
    loadProvinceSelectData() {
      this.$api['region/listProvince']().then(data => {
        this.provinceSelectData = data;
      });
    },
    provinceChangeHandler(provinceId) {
      this.citySelectData = [];
      this.areaSelectData = [];
      this.searchData.cityId = '';
      this.searchData.districtId = '';
      if (provinceId) {
        this.isDisableCityFlag = false;
        this.isDisableAreaFlag = true;
        let queryData = {
          provinceId
        };
        this.$api['region/listCity'](queryData).then(data => {
          this.citySelectData = data;
        });
      } else {
        this.isDisableCityFlag = true;
        this.isDisableAreaFlag = true;
      }
    },
    cityChangeHandler(cityId) {
      this.areaSelectData = [];
      this.searchData.districtId = '';
      if (cityId) {
        this.isDisableAreaFlag = false;
        let queryData = {
          provinceId: this.searchData.provinceId,
          cityId
        };
        this.$api['region/listDistrict'](queryData).then(data => {
          this.areaSelectData = data;
        });
      } else {
        this.isDisableAreaFlag = true;
      }
    }
  }
};

接口调用方法见axios封装及api调用方法

使用

index.vue:

模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<FormItem label="省: ">
  <Select v-model="searchData.provinceId" placeholder="全部" @on-change="provinceChangeHandler">
    <Option value="">全部</Option>
    <Option
    	v-for="item in provinceSelectData"
      :key="item.provinceId"
      :value="item.provinceId">
      {{item.provinceName}}
    </Option>
  </Select>
</FormItem>

<FormItem label="市: ">
  <Select v-model="searchData.cityId" placeholder="全部" @on-change="cityChangeHandler" :disabled="isDisableCityFlag">
    <Option value="">全部</Option>
    <Option
      v-for="item in citySelectData"
      :key="item.cityId"
      :value="item.cityId">
      {{item.cityName}}
    </Option>
  </Select>
</FormItem>

<FormItem label="区/县: ">
  <Select v-model="searchData.districtId" placeholder="全部" :disabled="isDisableAreaFlag" size="small">
    <Option value="">全部</Option>
    <Option
     v-for="item in areaSelectData"
     :key="item.districtId"
      :value="item.districtId">
      {{item.districtName}}
    </Option>
  </Select>
</FormItem>

script：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { WindowSize, BreadCrumb, Region } from '@/views/mixins';

mixins: [Region],

data() {
  return {
		searchData: {
      provinceId: '',
      cityId: '',
      districtId: ''
    }
  }
}

created() {
	this.loadProvinceSelectData();
}