vue option-select 地区三级联动

temple部分的内容：

<div class="from-area area">
        <select v-model="provinceId" @change="getcityList(provinceId)">
          <option value='' disabled selected style='display:none;'>请选择省份</option>
          <option :value="item.cid" v-for="(item, index) in provinceList" :key="index">{{item.name}}</option>
        </select>
        <select v-model="cityId" @change="getareaList(cityId)">
          <option value='' disabled selected style='display:none;'>请选择市</option>
          <option :value="item.cid" v-for="(item, index) in cityList" :key="index">{{item.name}}</option>
        </select>
        <select v-model="areaId">
          <option value='' disabled selected style='display:none;'>请选择地区</option>
          <option :value="item.cid" v-for="(item, index) in areaList" :key="index">{{item.name}}</option>
        </select>
      </div>

api的导入

import { provinceList, cityList, areaList } from '@/api'

不要忘记return里面哦。

return {
      provinceList: [],
      cityList: [],
      areaList: [],
      provinceId: '',
      cityId: '',
      areaId: ''
    }

method部分：

methods: {
  async getsensationInfo () {
      const res = await sensationInfo({})
      if (res.result === '0') {
        this.detail = res.datas
        this.provinceId = this.detail.provinceId ? this.detail.provinceId : ''
        if (this.detail.cityId) {
          // this.cityId = this.detail.cityId
          this.getcityList(this.provinceId, this.detail.cityId)
          if (this.detail.areaId) {
            // this.areaId = this.detail.areaId
            this.getareaList(this.detail.cityId, this.detail.areaId)
          }
        }
      }
    },
    async getprovinceList () {
      const res = await provinceList({})
      if (res.result === '0') {
        this.provinceList = res.datas.list
        this.areaList = []
      }
    },
    async getcityList (cid, id) {
      if (!cid) return
      const res = await cityList({ cid: cid })
      if (res.result === '0') {
        this.cityList = res.datas.list
        if (id) {
          this.cityId = id
        } else {
          this.cityId = ''
          this.areaId = ''
        }
      }
    },
    async getareaList (cid, id) {
      if (!cid) return
      const res = await areaList({ cid: cid })
      if (res.result === '0') {
        this.areaList = res.datas.list
        if (id) {
          this.areaId = id
        } else {
          this.areaId = ''
        }
      }
    }
}

最后就是在created

  created () {
    this.getprovinceList()
  }