4dkankan_official/src/components/citySelect/index.vue

<template>
  <div class="select-layout">
    <select class="prov" v-model="currentPID" @change="handleChange">
      <option :value="i" v-for="(item,i) in citylist" :key="i">{{item.p}}</option>
    </select>
    <select class="city" v-model="currentCID" @change="handleChange">
      <option :value="i" v-for="(item,i) in currentProv" :key="i">{{item.n}}</option>
    </select>
    <select class="dist" v-model="currentSID" @change="handleChange">
      <option :value="i" v-for="(item,i) in currentCity" :key="i">{{item.s}}</option>
    </select>
</div>
</template>

<script>
import {citylist} from './city'
export default {
  props: ['areaPath'],
  data () {
    let idArr = ['', '', '']
    if (this.areaPath) {
      let tempArr = this.areaPath.split(',')
      let [p, c, d] = tempArr
      idArr = (() => {
        let tmp = []
        citylist.forEach((item, index) => {
          if (item.p === p) {
            tmp.push(index)
            item.c.forEach((t2, i2) => {
              if (t2.n === c) {
                tmp.push(i2)
                t2.a.forEach((t3, i3) => {
                  if (t3.s === d) {
                    tmp.push(i3)
                  }
                })
              }
            })
          }
        })
        return tmp
      })()
    }

    return {
      citylist,
      currentPID: idArr[0] !== '' ? idArr[0] : 18,
      currentCID: idArr[1] !== '' ? idArr[1] : 3,
      currentSID: idArr[2] !== '' ? idArr[2] : 2
    }
  },
  computed: {
    currentProv: function () {
      let tmp = this.citylist[this.currentPID]
      return tmp.c
    },
    currentCity: function () {
      let cprov = this.citylist[this.currentPID]
      let tmp = cprov.c[this.currentCID]
      return tmp.a
    }
  },
  watch: {
    currentProv () {
      this.currentCID = 0
      this.currentSID = 0
    }
  },
  methods: {
    handleChange () {
      let prov = this.citylist[this.currentPID]
      let city = prov.c[this.currentCID]
      let dist = city.a[this.currentSID]
      this.$emit('currentVal', [
        prov.p, city.n, dist.s
      ])
    }
  },
  mounted () {
    this.handleChange()
  }
}
</script>

<style lang="scss" scoped>
.select-layout{
  .prov,.city,.dist{
    outline: none;
    appearance: none;
    border: solid 1px #e7e7e7;
    background: url('//4dscene.4dage.com/new4dkk/images/myAccount_selectOpen.png') no-repeat white;
    background-size: 6%;
    background-position: 95% 50%;
    width: 200px;
    line-height: 36px;
    padding-left: 10px;
    height: 36px;
    margin: 10px 25px 10px 0;
  }
  .dist{
    margin: 10px 0 10px 0;
  }
}
</style>