基于element ui下拉框的省市二级联动Vue组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013253924/article/details/84372034

本人Vue小白，代码比较粗陋简单，欢迎指导。

以下源码基于element ui下拉框，对外输出为选择省、市的城市编码，提供重置的方法。

json文件查看另一篇文章：

https://blog.csdn.net/u013253924/article/details/84334144

<template>
  <div class="province-city">
    <el-form-item class="page-form-item" label="所属省：" prop="status" style="width: calc(50% - 20px)">
      <el-select v-model="province" placeholder="请选择" @change="provinceChanged">
        <el-option
          :key="''"
          :label="'全部'"
          :value="''">
        </el-option>
        <el-option
          v-for="item in provinces"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
    </el-select>
    </el-form-item>
    <el-form-item class="page-form-item" label="市：" prop="status" style="width: calc(50% - 20px);margin-right: 0px">
      <el-select v-model="city"
                 :loading="loadingCity"
                 @change="cityChanged"
                 placeholder="请选择">
        <el-option
          :key="''"
          :label="'全部'"
          :value="''">
        </el-option>
        <el-option
          v-for="item in cities"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
    </el-select>
    </el-form-item>
  </div>
</template>

<script type="text/javascript">
  import provinceCity from '../../../static/json/provinceCity.json'
  export default {
    name: 'provinceCity',
    props: {
      provinceCode: {
        type: String,
        default: ''
      },
      cityCode: {
        type: String,
        default: ''
      }
    },
    created() {
      this.provinces = provinceCity.provinces
    },
    computed: {

    },
    mounted() {
      this.province = this.provinceCode
      this.provinceChanged(this.provinceCode)
      this.city = this.cityCode
    },
    data() {
      return {
        loadingCity: false,
        province: '',
        city: '',
        provinces: [],
        cities: []
      }
    },
    methods: {
      provinceChanged(value) {
        if (value !== '') {
          this.loadingCity = true
          for (var item of this.provinces) {
            if (item.code === value) {
              this.cities = item.cities
              this.city = ''
              this.loadingCity = false
              break
            } else {
              continue
            }
          }
        } else {
          this.cities = []
          this.city = ''
        }
        this.$emit('selectChange', this.province, this.city)
      },
      cityChanged(value) {
        this.$emit('selectChange', this.province, this.city)
      },
      resetProviceCity(province, city) {
        this.cities = []
        if (province && city) {
          this.province = province
          this.provinceChanged(this.province)
          this.city = city
        } else {
          this.province = ''
          this.city = ''
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>

</style>

使用：

import provincecity from '@/components/ProvinceCity'

components: {
  provincecity,
},

<provincecity ref="addFormProvince" @selectChange="触发父方法，输出省、市城市编码"></provincecity>

重置选中：this.$refs.addFormProvince.resetProviceCity()