三级联动——————包含初始值

三级联动——————包含初始值

<template>
<div>
   <div id="province">
    <!-- 省份选择 -->
     <select v-model="province" @change="getCity(province)" :title="province">
     <option v-for="(item, index) in arr" :key="index" ref="province" :value="(item.name)"
                            placeholder="请输入">{{ item.name}}</option>
      </select>
      <!-- 市区选择 -->
     <select v-model="city" @change="getCounty" ref="citys" :title="city">
    <option v-for="(item, ind) in cityArr" :key="ind" :value="(item.name)" ref="city">{{ item.name}}</option>
     </select>
    <!-- 县区选择 -->
    <select v-model="county" ref="countydd" :title="county">
   <option v-for="(item, index) in countyArr" :title="item.name" :key="index" :value="item.name">{{ item.name}}
   </option>
   </select>
  <!-- 显示整体选中的数据 -->
  <div class="provinceall">{{ province == '请选择省份' ? ' ' : province }}{{ city == '请选择市/区' ? ' ' :city}}{{ county == '请选择县/区' ? ' ' : county }}</div>
            </div>
            </div>
import items from './items'
export default {
    data() {
        return {
            visible: false,    //弹出开关
            province: '',      // 省份
            city: '',              // 市
            county: '',        // 县/区
            arr: items,      // 所有城市的数据，已经在items.js里面定义了
            cityArr: [{ name: '请选择市/区' }],   // 市的数据,并设置初始值
            countyArr: [{ name: '请选择县/区' }],// 县的数据,并设置初始值
        };
    },
     methods: {
        // 省份的选择事件
        getCity() {
            for (var i = 0; i < this.arr.length; i++) {
                var obj = this.arr[i]
                if (this.province == obj.name) {
                    this.cityArr = obj.sub;
                }
            }
            // 省份改变市县清空
            this.city = ' '
            this.county = ' '
        },
        // 市区的选择事件
        getCounty() {
            for (var i = 0; i < this.cityArr.length; i++) {
                var obj = this.cityArr[i]
                if (this.city == obj.name) {
                    this.countyArr = obj.sub;
                }
            }
            // 市改变县区清空
            this.county = ' '
        }
    },
    mounted() {
        // 初始化弹出框
        this.visible = !this.visible;
        // 初始化省份
        this.province = '请选择省份'
        this.city = '请选择市/区'
        this.county = '请选择县/区'
    }
}
</template>