HTML:

<Select v-model="model1" style="width:2rem" @on-change="provincesChanged" >

            <Option v-for="(item,i) in provinces" :value="item.code"  :label="item.regionName" :key="i"></Option>

          </Select>

          <Select v-model="model2" style="width:2rem; margin: 0 0.1rem; " @on-change="citysChanged">

            <Option v-for="(item,i) in citys" :value="item.code" :key="i">{{ item.regionName }}</Option>

          </Select>

          <Select v-model="model3" style="width:2rem">

            <Option v-for="(item,i) in zones" :value="item.code" :key="i">{{ item.regionName }}</Option>

          </Select>

data初始化：

provinces:[],

      citys:[],

      zones:[],

      model1: "",

      model2: "",

      model3: ""

省

created() {

    this.provinces = list.filter( x => x.parentCode === '0' );

  },

methods: {

    //根据省一级选择筛选市

    provincesChanged(selectValue){

      this.citys = list.filter( x => x.parentCode === selectValue );

    },

    //根据市一级选择筛选区

    citysChanged(selectValue){

      this.zones = list.filter( x => x.parentCode === selectValue );

    }

  }