Vue project city and district linkage drop-down selection box complete code

1. Create a city drop-down selection component

2. Write js import file please seeJuejin. Cn/post / 700471…

3. Import the vUE file

<template>
  <div style="display: flex; align-items: baseline;">
    <el-select
      class="filter-item"
      style="width: 130px;"
      v-model="provAndCity.province"
      @change="handleProvince"// This event occurs when the element loses focusclearable
    >
      <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"></el-option> </el-select
    ><label style="margin:0 10px; font-weight:normal">The city</label>
    <el-select class="filter-item" style="width: 130px;" v-model="provAndCity.city" @change="handleCity" clearable>
      <el-option v-for="item in cityList" :key="item" :label="item" :value="item"></el-option>
    </el-select>
  </div>
</template>

<script>
import { provinces as getProvinces, citys as getCitys } from '@/api/hmmm/citys.js'
export default {
  name: 'citys'.props: ['value'].data() {
    return {
      provAndCity: {
        province: this.value.province,
        city: this.value.city
      },
      provinceList: [].cityList: []}},created() {
    this.getCityData()
  },
  methods: {
    / / get province
    getCityData: function() {
      this.provinceList = getProvinces()
      if (this.provAndCity.province) {
        this.cityList = getCitys(this.provAndCity.province)
      }
    },
    // Select the province to get the city
    handleCity: function(e) {
      this.cityList = getCitys(e)
      // this.value.city = this.cityList[0]
      this.$emit('input', {
        province: this.provAndCity.province,
        city: e
      })
    },
    // Select the province to get the city
    handleProvince: function(e) {
      this.cityList = getCitys(e)
      this.$emit('input', {
        province: this.provAndCity.province,
        city: this.cityList[0]})}},// Listen for data changes
  watch: {
    // Since the parent component passed v-model="XXXX", where XXXX is the data retrieved via Ajax
    // So, there is a change in the process of passing the value:
    // 1. Initial value is ""
    // 2. After ajax returns, the child component is automatically passed in (v-model is reactive).
    // So use watch to listen for this change
    // The format is:
    // segment: {
    // handler:(newVal, oldVal) {

    / /},
    // deep: true
    // }
    value: {
      handler(newVal, oldVal) {
        // Update the province
        this.provAndCity.province = newVal.province
        // Obtain the corresponding municipal level data
        this.cityList = getCitys(newVal.province)
        / / update the city
        this.provAndCity.city = newVal.city
      },
      deep: true}}}</script>

<style></style>

Copy the code