vue中组件传值 引用页面与组件页面绑定参数 vue省市地区街道级联选择组件

在做后台的时候需要用到地区级联选择器 然后就自己封装了一个

其中 组件页面中

export default {
  props: {		//使用value接收引用页面的绑定值
    value: [String]
  },
  watch: {
    value: {
      handler(val) {
        //val 以及 this.value 都可以获取到引用页面的绑定值
      },
      deep: true,
      immediate: true
    }
  },
}
//this.$emit("input", this.changeForm()); 这句代码是给引用页面绑定值返回内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整地区json文件在网盘中

链接：https://pan.quark.cn/s/0b70e60fd377
提取码：4sSe

下面是完整代码：

引用页面中

<select-address v-model="form.applicableRange"/>
1

main.js中注册组件

import SelectAddress from '@/components/SelectAddress'

Vue.component('SelectAddress', SelectAddress)
1
2
3

组件页面

<template>
  <div class="selectAddress">
    <el-form :model="form">
      <el-select v-model="form.provincial" @change="updateProvincials()" clearable
                 placeholder="请选择省份">
        <el-option v-for="provincial in provincials" :key="provincial.label" :value="provincial.label"
                   :label="provincial.label"/>
      </el-select>
      <el-select v-model="form.municipal" @change="updateMunicipals()"
                 placeholder="请选择城市">
        <el-option v-for="municipal in municipals" :key="municipal.label" :value="municipal.label"
                   :label="municipal.label"/>
      </el-select>
      <el-select v-model="form.regional" @change="updateRegionals()"
                 placeholder="请选择地区">
        <el-option v-for="regional in regionals" :key="regional.label" :value="regional.label"
                   :label="regional.label"/>
      </el-select>
      <el-select v-model="form.streets" @change="updateStreetss()"
                 placeholder="请选择街道">
        <el-option v-for="streets in streetss" :key="streets.label" :value="streets.label" :label="streets.label"/>
      </el-select>
    </el-form>
  </div>
</template>
<script>
const options = require("@/assets/images/pcas-code.json");
export default {
  props: {
    value: [String]
  },
  data() {
    return {
      form: {
        provincial: null,
        municipal: null,
        regional: null,
        streets: null,
      },
      provincials: options,
      municipals: [],
      regionals: [],
      streetss: [],
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          const list = this.value.split(' ');
          if(list.length == 1){
            this.form.provincial = list[0];
            this.updateProvincials();
          }else if(list.length == 2){
            this.form.provincial = list[0];
            this.updateProvincials();
            this.form.municipal = list[1];
            this.updateMunicipals();
          }else if(list.length == 3){
            this.form.provincial = list[0];
            this.updateProvincials();
            this.form.municipal = list[1];
            this.updateMunicipals();
            this.form.regional = list[2];
            this.updateRegionals();
          }
        } else {
          this.reset();
          return [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  created() {
  },
  computed: {},
  methods: {
    reset() {
      this.form = {
        provincial: null,
        municipal: null,
        regional: null,
        streets: null
      }
    },
    updateProvincials() {
      this.form.municipal = "";
      this.form.regional = "";
      this.form.streets = "";
      this.municipals = [];
      this.regionals = [];
      this.streetss = [];
      this.$emit("input", this.changeForm());
      if(this.form.provincial){
        this.municipals = this.provincials.find(provincial => provincial.label == this.form.provincial).children;
      }
    },
    updateMunicipals() {
      this.form.regional = "";
      this.form.streets = "";
      this.regionals = [];
      this.streetss = [];
      this.$emit("input", this.changeForm());
      this.regionals = this.municipals.find(municipal => municipal.label == this.form.municipal).children;
    },
    updateRegionals() {
      this.form.streets = "";
      this.streetss = [];
      this.$emit("input", this.changeForm());
      this.streetss = this.regionals.find(regional => regional.label == this.form.regional).children;
    },
    updateStreetss() {
      this.$emit("input", this.changeForm());
    },
    changeForm(){
      let applicableRange = "";
      if(this.form.provincial){
        applicableRange = this.form.provincial
      }
      if(this.form.provincial && this.form.municipal){
        applicableRange = this.form.provincial + " " + this.form.municipal
      }
      if(this.form.provincial && this.form.municipal && this.form.regional){
        applicableRange = this.form.provincial + " " + this.form.municipal + " " + this.form.regional
      }
      if(this.form.provincial && this.form.municipal && this.form.regional && this.form.streets){
        applicableRange = this.form.provincial + " " + this.form.municipal + " " + this.form.regional + " " + this.form.streets
      }
      return applicableRange;
    }
  },
}
</script>

<style scoped lang="scss">
.el-select {
  width: 18%;
  margin-left: 1%;
}
</style>

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145