vue实现省市区三级联动，附文件代码

vue项目中使用到三级联动，现在自己实现一个三级联动，仅供大家参考一下，直接上代码。

<template>
        <el-form-item label="地址:">
          <div style="display:flex;margin-bottom: -18px;">
            <el-select v-model="ruleForm.address.country"
                       filterable
                       size="small"
                       style="width:160px;margin-right:10px"
                       @change="domesticClick">
              <el-option v-for="item in country_list"
                         :key="item.value"
                         :label="item.name"
                         :value="item.name" />
            </el-select>
            <mFormAddressCommon v-if="!showCountryEnLive"
                    v-model="ruleForm.address"
                    :show-county="true"
                    style="width:100%;" />
          </div>
        </el-form-item>
        </template>
<script>
import mFormAddressCommon from '@components/m-form/m-form-address-common.vue'
import country from '@assets/js/country'
import { mapActions, mapGetters } from 'vuex'

export default {
  components: {
    mFormAddressCommon,

  },
  data() {
    return {
      ruleForm: {
        address: {
          country: '中国大陆',
          province: '',
          city: '',
          county: '',
          details: '',
          postcode: '',
        },

      },
      country_list: country,
      showCountryEnLive: false,
    }
   
  },
  computed: {
    ...mapGetters({
      user: 'getUserInfo',
      group: 'getGroup',

    }),
  },
  methods: {
    domesticClick(row) {
      console.log(row)
      if (row != '中国大陆') {
        this.showCountryEnLive = true
      } else {
        this.showCountryEnLive = false
      }
    },
  },
}
</script>

mFormAddressCommon 组件代码

​
<template>
  <div>
    <el-row
      type="flex"
      justify="space-between"
    >
      <el-col>
        <el-form-item prop="province">
          <el-select
            v-model="content.province"
            size="small"
            placeholder="省份"
            @change="changeProvince"
          >
            <el-option
              v-for="item in provinceArr"
              :key="item.value"
              :value="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item prop="city" style="margin-left:10px">
          <el-select
            v-model="content.city"
            size="small"
            placeholder="城市"
            @change="changeCity"
          >
            <el-option
              v-for="item in citiesArr"
              :key="item.value"
              :value="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="showCounty" style="margin-left:10px">
        <el-form-item prop="county">
          <el-select

            v-model="content.county"
            size="small"
            placeholder="区县"
            @change="changeCounty"
          >
            <el-option
              v-for="item in countyArr"
              :key="item.value"
              :value="item.label"
            >{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- <el-input type="text"
    size="small"
              v-model="content.details"
              placeholder="请输入详细地址" /> -->
  </div>
</template>

<script>
import { provinces } from '@/assets/js/provinces2'

export default {
  name: 'MFormAddressCommon', // 选择省份城市(通用)
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    content: {
      type: Object,
      default: {
        province: '', // 省份
        city: '', // 城市
        county: '', // 区县
        postcode: '',
        details: '' // 详细
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showCounty: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      provinceArr: [],
      citiesArr: [],
      countyArr: []

    }
  },
  created() {
    this.provinceArr = provinces.data
  },
  mounted() {
    setTimeout(() => {
      if (this.content.province) {
        this.changeProvinceInit(this.content.province)
      }
      if (this.content.city) {
        this.changeCityInit(this.content.city)
      }
    }, 400)
  },
  methods: {
    async changeProvinceInit(val) {
      let item = null
      this.provinceArr.forEach((c) => {
        if (c.label === val) {
          item = c
        }
      })
      if (!item) return
      this.citiesArr = item.children
      this.countyArr = []
    },
    async changeCityInit(val) {
      let item = null
      this.citiesArr.forEach((c) => {
        if (c.label === val) {
          item = c
        }
      })
      if (!item) return
      this.countyArr = item.children || []
    },
    async changeProvince(val) {
      let item = null
      console.log('changeProvince', val)
      console.log('changeProvince', this.provinceArr)
      this.provinceArr.forEach((c) => {
        if (c.label === val) {
          item = c
        }
      })
      if (!item) return
      this.citiesArr = item.children
      this.countyArr = []
      this.content.city = ''
      this.content.county = ''
      this.content.postcode = ''
      this.$emit('change', this.content)
    },
    async changeCity(val) {
      
      let item = null
      this.citiesArr.forEach((c) => {
        if (c.label === val) {
          item = c
        }
      })
      if (!item) return
      this.countyArr = item.children || []
      this.content.county = ''
      this.content.postcode = ''
      this.$emit('change', this.content)
    },
    // async changeCounty() {
    //   this.$emit('change', this.content)
    // }
    async changeCounty(val) {
      this.countyArr.forEach((c) => {
        if (c.label === val) {
          this.content.postcode = c.postCode
        }
      })
      console.log(this.content, val)
      this.$emit('change', this.content)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

​

以上内容仅供参考